jQuery - for循环超时 [英] jQuery - timeout in for loop

问题描述

我已经写了一些jQuery来遍历数组中的项目，显示一个随机数字，然后继续显示另一个数字。问题是我想在循环内放置一个延迟，以便显示2秒的数字，然后移动到下一个。所以你看到一个随机的数字持有2秒，然后移动到下一个。我已经尝试在循环内放置一个超时，但没有奏效。任何帮助将是惊人的感谢。

 函数RandomNumberGenerator（）{
 
 var myArray = new Array（ 99）; $ var 
 
 for（var i = 0; i <99; i ++）{
 myArray [i] = Math.floor（Math.random（）* 100）
 myArrayTwo [i ] = Math.floor（Math.random（）* 100）
} 
 
 for（var i = 0; i <9; i ++）{
 $（'li。 （函数（索引）{
 
 //超时需要在这里某处
 
 return（myArray [i]）; 
 
}）
} 
}）; 
 
  

解决方案

首先，您需要把它做的工作（显示随机数，并决定是否应该继续）在自己的功能内的代码。这个函数也可以是 RandomNumberGenerator 中的局部变量：

  var displayNumber = function（）{
 $（'li.num'）。text（myArray [i ++]）; 
 if（i <100）{
 setTimeout（displayNumber，2000）; 
} 
}; 
  

上面的函数在 li.num ，增加 i ，并告诉浏览器再次调用该函数（使用 setTimeout ）在两秒内 - 但只有当我们显示少于100个数字。

所以当这个函数（ displayNumber ）第一次被调用的时候，它会显示一个数字并且设置它在2秒后再次调用自己显示另一个号码，等等）。如果它已经显示了100个号码，它不会再次设置呼叫，所以在这一点上重复停止。

所以你现在可以这样做：

  var myArray = new Array（99）; （var i = 0; i <99; i ++）{
 myArray [i] = Math.floor（Math.random（）* 100）的
; 
} 
 
 var i = 0; 
 var displayNumber = function（）{
 $（'＃foo'）。text（myArray [i ++]）; 
 if（i <10）{
 setTimeout（displayNumber，2000）; 
} 
}; 
 
 displayNumber（）; //让球滚动
  

I have written a bit of jQuery to loop through items in a array an display a random number and then move on to display another number. The problem is I want to put a delay inside the loop so that it shows the number for 2 seconds and then moves of to the next. so you see a random number it holds for 2 seconds and then moves on to the next. I have tried putting a timeout inside the loop but that didn't work. Any help would be amazing thanks.

function RandomNumberGenerator(){

    var myArray = new Array(99);

        for (var i=0; i< 99; i++) {
            myArray[i] = Math.floor(Math.random()*100)
            myArrayTwo[i] = Math.floor(Math.random()*100)
        }

        for (var i=0; i< 9; i++) {
            $('li.num').text(function(index) {

            // timeout needs to be here somewhere 

            return (myArray[i]);

            })
        }
});
}

解决方案

First of all you need to put the code that does the work (displays the random number and decides if it should continue) inside its own function. This function can also be a local variable inside RandomNumberGenerator:

    var displayNumber = function() {
        $('li.num').text(myArray[i++]);
        if (i < 100) {
            setTimeout(displayNumber, 2000);
        }
    };

The function above puts a number in li.num, increments i, and tells the browser to call the function again (using setTimeout) in two seconds -- but only if we have shown less than 100 numbers.

So when this function (displayNumber) is called for the first time, it displays one number and sets things up to call itself again after 2 seconds (to display another number, and so on). If it has displayed 100 numbers already it does not set the call up again, so at that point the repetition stops.

So you can now do:

    var myArray = new Array(99);
    for (var i=0; i< 99; i++) {
        myArray[i] = Math.floor(Math.random()*100);
    }

    var i = 0;
    var displayNumber = function() {
        $('#foo').text(myArray[i++]);
        if (i < 10) {
            setTimeout(displayNumber, 2000);
        }
    };

    displayNumber(); // to get the ball rolling

这篇关于jQuery - for循环超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！