SetTimeout for loading items in a drop-down list

Question

I use setTimeout to prevent the warning from slow processing of the script mentioned in the section Disabling the long-running-script message in Internet Explorer . It downloads only the first 4 elements of the array. How do I load all the items in the drop-down menu using time delay ?

Note. The goals of the browser are IE6 +

Note. In my real scenario, the array is retrieved from the server using jQuery Ajax

Demo script

References

• Uncaught ReferenceError: foobar not defined (anonymous function)
• Arguments.callee is deprecated - what should I use instead?

Javascript

 var locIterator = 0; $(document).ready(function () { function myCallback(locationArray) { loadDropdownForLocation(locationArray); } function loadDropdownForLocation(locationArray) { alert(locIterator); if (locationArray != null && locationArray != 'undefined') { //Loop through array for (; locIterator < locationArray.length; locIterator++) { var textValue = locationArray[locIterator].split('*'); alert(textValue); //Add ddl options - text and value var option = $('<option></option>'); option.val(textValue[0]); option.html(textValue[0]); $('.ddlToLocation').append(option); // Every 3 iterations, take a break if (locIterator > 0 && locIterator % 3 == 0) { // Manually increment `i` because we break locIterator++; // Set a timer for the next iteration window.setTimeout('myCallback(locationArray)', 100); break; } } } } var testArray = ["a", "b", "c", "d", "e", "f", "g", "g", "h", "i", "j"]; loadDropdownForLocation(testArray); window['myCallback'] = myCallback; }); 

HTML

 <select name="ddlToLocation" id="ddlToLocation" onfocus="document.forms[0].imgArrowForToLocation.src='../Images/ArrowVisibleDB.gif';" onblur="document.forms[0].imgArrowForToLocation.src='../Images/ArrowInvisible.gif';" class="ddlToLocation" style="font-size: 11; width: 110px;"> </select> 

Answer 1

Finished using the retry method mentioned by @Eric Leschinski in Disabling the long-running-script message in Internet Explorer . This works great for me .. Tested in IE8.

Fiddle - http://jsfiddle.net/Z86dq/41/

the code

  var locIterator = 0; $(document).ready(function () { RepeatingOperation = function(op, yieldEveryIteration) { //keeps count of how many times we have run heavytask() //before we need to temporally check back with the browser. var count = 0; this.step = function() { //Each time we run heavytask(), increment the count. When count //is bigger than the yieldEveryIteration limit, pass control back //to browser and instruct the browser to immediately call op() so //we can pick up where we left off. Repeat until we are done. if (++count >= yieldEveryIteration) { count = 0; //pass control back to the browser, and in 1 millisecond, //have the browser call the op() function. setTimeout(function() { op(); }, 1, []) //The following return statement halts this thread, it gives //the browser a sigh of relief, your long-running javascript //loop has ended (even though technically we havn't yet). //The browser decides there is no need to alarm the user of //an unresponsive javascript process. return; } op(); }; }; function loadDropdownForLocation(locationArray) { if (locationArray != null && locationArray != 'undefined') { var repeater = new this.RepeatingOperation(function() { var textValue = locationArray[locIterator].split('*'); //alert(textValue); //Add ddl options - text and value var option = $('<option></option>'); option.val(textValue[0]); option.html(textValue[0]); $('.ddlToLocation').append(option); if (locIterator < locationArray.length) { locIterator= locIterator+1; repeater.step(); } }, 3); repeater.step(); } } var testArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j","bye"]; loadDropdownForLocation(testArray); }); 

Answer 2

This works: http://jsfiddle.net/Z86dq/35/

 var locIterator = 0; $(document).ready(function () { function myCallback(locationArray) { loadDropdownForLocation(locationArray); } function loadDropdownForLocation(locationArray) { if (locationArray != null && locationArray != 'undefined') { //Loop through array for (; locIterator < locationArray.length; locIterator++) { var textValue = locationArray[locIterator].split('*'); console.log('idx ' + locIterator + ' textvalue ' + textValue); //Add ddl options - text and value var option = $('<option></option>'); option.val(textValue[0]); option.html(textValue[0]); $('.ddlToLocation').append(option); // Every 3 iterations, take a break if (locIterator > 0 && locIterator % 3 == 0) { // Manually increment `i` because we break locIterator++; // Set a timer for the next iteration myCallback(locationArray); break; } } } } var testArray = ["a", "b", "c", "d", "e", "f", "g", "g", "h", "i", "j"]; loadDropdownForLocation(testArray); window['myCallback'] = myCallback; });