用于在下拉列表中加载项目的setTimeout [英] setTimeout for loading items in a dropdown list

问题描述

我使用 setTimeout 来克服。它只加载前4个数组项。如何使用时间延迟加载下拉菜单中的所有项目？

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?

注意：目标浏览器是IE6 +

Note: The browsers targeted are IE6+

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

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

Demo-小提琴

引用

References

2. Arguments.callee已被弃用 - 应该使用什么？

1. Uncaught ReferenceError:foobar is not defined (anonymous function)
2. Arguments.callee is deprecated - what should be used instead?

Javascript

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

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>

推荐答案

结束使用@Eric Leschinski提到的重复步骤方法在禁用Internet Explorer中的长时间运行脚本消息。它对我来说工作正常..在IE8中测试。

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.

小提琴 - 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！