Question

我使用setTimeout来克服“Disabling the long-running-script message in Internet Explorer”中提到的缓慢处理脚本警告..它只加载前4个数组项。如何使用time delay

加载下拉列表中的所有项目

注意：目标浏览器是IE6 +

注意：在我的实际场景中，使用jQuery Ajax

从服务器检索数组

Demo- Fiddle

参考

Uncaught ReferenceError:foobar is not defined (anonymous function)
Arguments.callee is deprecated - what should be used 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

这有效：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;

 });

Answer 2

使用@Eric Leschinski在Disabling the long-running-script message in Internet Explorer中提到的重复步骤方法结束。它对我来说很好。在IE8中测试过。

小提琴 - http://jsfiddle.net/Z86dq/41/

<强>代码

    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用于在下拉列表中加载项目

2 个答案: