setTimeout for loading items in a dropdown list

Question

I am using setTimeout to overcome the slow processing script warning mentioned in " Disabling the long-running-script message in Internet Explorer ".. It is loading only the first 4 array items. How can load all the items in the dropdown using a time delay?

Note: The browsers targeted are IE6+

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

Demo- Fiddle

References

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>

You do know that `setTimeout()` takes a function as an argument, not a String? You should probably use `setInterval()` anyways, incrementing a higher scoped variable until you `clearInterval()`. — StackSlave, Jul 20 '14 at 05:35

score 0 · Answer 1 · answered Jul 20 '14 at 06:04

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;

 });

But it does not have any `time delay` – LCJ Jul 20 '14 at 14:13 — LCJ, Jul 20 '14 at 14:13

score 0 · Accepted Answer · edited May 23 '17 at 10:33

Ended up using repeat step approach mentioned by @Eric Leschinski in Disabling the long-running-script message in Internet Explorer. It works fine for me.. Tested in IE8.

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

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);



    });

setTimeout for loading items in a dropdown list

2 Answers2

Linked