jQuery - for循环中的超时

Question

我已经编写了一些jQuery来循环遍历数组中的项并显示一个随机数，然后继续显示另一个数字。问题是我想在循环中加入一个延迟，这样它就能显示2秒的数字，然后再移动到下一个。所以你看到一个随机数它保持2秒，然后移动到下一个。我试过在循环内放置超时，但那不起作用。谢谢你的帮助。

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

Answer 1

请注意，这不是最干净/更好的解决方案，但由于没有人发布您所要求的，这里是for循环中延迟的实现:

var delay = 2000; //2 seconds
for (var i=0; i< 9; i++) {
    setTimeout(function(index){
       $('li.num').text(myArray[index]);
    },delay * i,i);

Answer 2

首先，您需要将完成工作的代码(显示随机数并决定是否继续)放入其自己的函数中。该函数也可以是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);
    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

Answer 3

你并不是真的想要超时"在循环中"，你想要在超时结束时更新数字，然后开始另一个超时来更新数字，并重复，直到你的结束条件得到满足。

Answer 4

延迟函数中的代码不起作用。只要你的代码在运行，浏览器就不会显示任何更新，所以你必须在更改显示之前退出函数。

因此，您必须将工作分成可以使用setTimeout或setInterval调用的部分。

像这样:

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)
  }
  var index = 0;
  var handle = window.setInterval(function() {
    $('li.num').text(myArray[index]);
    if (++index == 100) {
      window.clearInterval(handle);
    }
  }, 2000);
}

Answer 5

这是我将为此使用的相当简洁的结构类型(使用setTimeout而不是setInterval)。

var $li = $('li.num');  // Set a local variable for efficiency
var tloop = function(iter, num_of_iters, delay, $li){
    setTimeout(function(){
        $li.text(Math.floor(Math.random()*100)); 
        if (iter < (num_of_iters - 1))  tloop(iter+1, num_of_iters, delay, $li);
    }, delay);
};
tloop(0, 10, 2000, $li);  // Kick off the display