将循环的每次迭代延迟一定时间

JSFiddle: http://jsfiddle.net/KH8Gf/27/

Code:

$(document).ready(function()
{
 $('#expand').click(function()
    {
        var qty= $('#qty').val();

        for (var counter = 0; counter < qty; counter++)
        {
            $('#child').html($('#child').html() + '<br/>new text');            
        }
    });
});

How can I delay each iteration of the loop by a certain time?

如何将循环的每次迭代延迟一定时间?

I tried the following unsuccessfully:

我尝试了下面的失败:

setTimeout(function(){
$('#child').html($('#child').html() + '<br/>new text'); 
},500);

and

$('#child').delay(500).html($('#child').html() + '<br/>new text');

1 个解决方案

#1

These cases all seem to work best by putting the operation into a local function and then calling that local function from setTimeout() to implement your delay. Due to the wonders of closures in javascript, the local function gets access to all the variables at the levels above it so you can keep track of your loop count there like this:

这些情况似乎最好通过将操作放入本地函数然后从setTimeout()调用该本地函数来实现延迟。由于javascript中的闭包奇迹,本地函数可以访问上面级别的所有变量,因此您可以像这样跟踪循环计数:

$(document).ready(function() {
     $('#expand').click(function() {
          var qty = $('#qty').val();
          var counter = 0;
          var child = $('#child');

          function next() {
              if (counter++ < qty) {
                  child.append('<br/>new text');            
                  setTimeout(next, 500);
              }
          }
          next();
      });
});

1 个解决方案

#1

更多相关文章

随机推荐