गहन जावास्क्रिप्ट प्रोसेसिंग के दौरान ब्राउज़र पर मैं नियंत्रण कैसे कर सकता हूं (संक्षिप्त रूप से)?

Question

मैंने गहन डीओएम प्रसंस्करण (जावास्क्रिप्ट का उपयोग करके) के दौरान setTimeout() का उपयोग करने के बारे में here पोस्ट पढ़ा है, लेकिन मैं इस फ़ंक्शन को निम्न कोड के साथ कैसे एकीकृत कर सकता हूं? नीचे दिया गया कोड विकल्पों की एक छोटी संख्या के लिए ठीक काम करता है, लेकिन स्थानीय जावास्क्रिप्ट प्रोसेसिंग करते समय विकल्पों की संख्या बहुत बड़ी हो जाती है, "एनिमेटेड जीआईएफ फ्रीज" कृपया प्रतीक्षा करें। धन्यवाद!

function appendToSelect() { 
    $("#mySelect").children().remove() ; 
    $("#mySelect").html(
     '<option selected value="' + obj.data[0].value + '">' 
     + obj.data[0].name 
     + '</option>' 
    ); 
    var j = 1 ; 
    for (var i = 1; i < obj.data.length; i++) { 
     $("#mySelect").append(
      '<option value="' + obj.data[i].value + '">' 
      + obj.data[i].name 
      + '</option>' 
     ); 
    } 
} 

Answer 1

यहाँ एक समाधान है:

function appendToSelect() { 
    $("#mySelect").children().remove(); 
    $("#mySelect").html(
    '<option selected value="'+obj.data[0].value+'">' 
    + obj.data[0].name 
    + '</option>' 
); 
    obj.data.splice(0, 1); // we only want remaining data 
    var appendOptions = function() { 
    var dataChunk = obj.data.splice(0, 10); // configure this last number (the size of the 'chunk') to suit your needs 
    for(var i = 0; i < dataChunk.length; i++) { 
     $("#mySelect").append(
     '<option value="' + dataChunk[i].value + '">' 
     + dataChunk[i].name 
     + '</option>' 
    ); 
    } 
    if(obj.data.length > 0) { 
     setTimeout(appendOptions, 100); // change time to suit needs 
    } 
    }; 
    appendOptions(); // kicks it off 
} 

नहीं के रूप में सुरुचिपूर्ण @Borgar's के रूप में समाधान है, लेकिन आप विचार मिलता है। असल में, मैं वही काम कर रहा हूं, लेकिन यह आपके एक समारोह में इसे उच्च-आदेश समारोह में तोड़ने के बजाए करता है। मुझे उसका समाधान पसंद है, लेकिन यदि आप नहीं करते हैं, तो शायद यह आपके लिए काम करेगा।

---

संपादित करें: उन है कि तुरंत यह दिखाई नहीं देता के लिए, इस समाधान और @Borgar's के बीच मुख्य अंतर यह है कि इस समाधान आप डेटा के 'हिस्सा' है कि बीच संसाधित किया जाता है के आकार को निर्धारित करने की अनुमति देता है प्रत्येक टाइमआउट। @Borgar'sके बाद टाइम्स-आउट सरणी के प्रत्येक सदस्य संसाधित किया जाता है। अगर मुझे समय मिलता है, तो मैं इसे संभालने के लिए एक उच्च-आदेश फ़ंक्शन बनाने का प्रयास करूंगा ताकि यह अधिक सुरुचिपूर्ण हो। हालांकि कोई वादा नहीं! ;)

---

संपादित करें: तो, यहाँ @Borgar's समाधान है, जो एक 'हिस्सा' आकार की स्थापना और अधिक आसानी से टाइमआउट मान विन्यस्त करने के लिए अनुमति देता है की मेरी रूपांतर है:

function incrementallyProcess(workerCallback, data, chunkSize, timeout, completionCallback) { 
    var itemIndex = 0; 
    (function() { 
    var remainingDataLength = (data.length - itemIndex); 
    var currentChunkSize = (remainingDataLength >= chunkSize) ? chunkSize : remainingDataLength; 
    if(itemIndex < data.length) { 
     while(currentChunkSize--) { 
     workerCallback(data[itemIndex++]); 
     } 
     setTimeout(arguments.callee, timeout); 
    } else if(completionCallback) { 
     completionCallback(); 
    } 
    })(); 
} 

function appendToSelect() { 
    $("#mySelect").children().remove(); 
    $("#mySelect").html(
    '<option selected value="' + obj.data[0].value + '">' 
    + obj.data[0].name 
    + '</option>' 
); 
    obj.data.splice(0,1); // we only want remaining data  
    incrementallyProcess(function(data) { 
    $("#mySelect").append(
    '<option value="' + data.value + '">' 
    + data.name 
    + '</option>' 
    ); 
    }, obj.data, 10, 100, removeAnimatedGifFunction); // last function not required... 
} 

आशा है कि मदद करता है - मैं लगता है कि यह दोनों समाधानों में से सबसे अच्छा जोड़ता है। नोटिस, दूसरा अनाम फ़ंक्शन अब इंडेक्स मान का उपयोग नहीं करता है, लेकिन बस पूरे ऑब्जेक्ट (मान और नाम गुणों के साथ) में गुजरता है; जो इसे थोड़ा क्लीनर बनाता है, क्योंकि वर्तमान ऑब्जेक्ट की अनुक्रमणिका वास्तव में नहीं है जो चीज़ों पर पुनरावृत्ति करते समय उपयोगी होती है, आईएमओ।

मुझे यकीन है कि अभी भी ऐसी चीजें हैं जो इसे और भी बेहतर बनाने के लिए की जा सकती हैं, लेकिन इसे पाठक के लिए एक अभ्यास के रूप में छोड़ दिया जाता है। ;)

Answer 2

आप समारोह के पुनर्लेखन के लिए तत्व सूची है, तो किसी प्रकार की एक काउंटर का उपयोग कर सूची पर पाश कैश करने के लिए की आवश्यकता होगी।

तब जब काउंटर% max_num_before_wait == 0 काउंटर तक पहुंच जाता है, तो फ़ंक्शन पर टाइमआउट को वापस कॉल करें।

पूर्ण सूची के अंत में कैश और काउंटर को साफ़ करना सुनिश्चित करें, या अतिरिक्त गणना पैरामीटर के साथ द्वितीयक फ़ंक्शन का उपयोग करें।

Answer 3

ऐसा इसलिए होता है कि मैं इस बारे में एक पल पहले here पोस्ट कर रहा था।

function processLoop(actionFunc, numTimes, doneFunc) { 
    var i = 0; 
    var f = function() { 
    if (i < numTimes) { 
     actionFunc(i++); // closure on i 
     setTimeout(f, 10) 
    } 
    else if (doneFunc) { 
     doneFunc(); 
    } 
    }; 
    f(); 
} 

अपनी स्थिति के लिए यह इस तरह इस्तेमाल किया जाएगा:: यहाँ एक समय पाश समारोह है

function appendToSelect() { 

    $("#mySelect").children().remove() ; 
    $("#mySelect").html(
     '<option selected value="' + obj.data[0].value + '">' 
     + obj.data[0].name 
     + '</option>' 
); 
    var j = 1 ; 

    processLoop(function (i){ 
    $("#mySelect").append(
     '<option value="' + obj.data[i].value + '">' 
     + obj.data[i].name 
     + '</option>' 
    ); 
    }, obj.data.length); 

} 

आप सुनिश्चित करें कि आप एक बंद या obj के लिए कुछ अन्य उपयोग कर सकते है कि सुनिश्चित करना होगा पुनरावृत्ति समारोह के भीतर चर।

उम्मीद है कि इससे मदद मिलती है।

Answer 4

यदि आपको कुछ आसान की आवश्यकता है, तो मैंने एसिंक्रोनस लूप के लेखन को आसान बनाने के लिए एक jQuery प्लगइन लिखा: jQuery Async।

function appendToSelect() { 
    $("#mySelect").children().remove() ; 
    $("#mySelect").html(
     '<option selected value="' + obj.data[0].value + '">' 
     + obj.data[0].name 
     + '</option>' 
    ); 

    ///////////////////////////// 
    var i = 1; 
    $.whileAsync({ 
     test: function(){ i < obj.data.length; } 
     loop: function() 
     { 
      $("#mySelect").append(
       '<option value="' + obj.data[i].value + '">' 
       + obj.data[i].name 
       + '</option>' 
      ); 
      i++; 
     } 
    }); 
    ///////////////////////////// 
} 

जवाबदेही मदद चाहिए:

प्लगइन का उपयोग करना, अपने कोड के रूप में लिखा जा सकता है। अधिक नियंत्रण के लिए 'थोक' और 'देरी' विकल्प को ट्विक करें।