jQuery - for 循环中的超时答案

【问题标题】：jQuery - timeout in for loopjQuery - for 循环中的超时
【发布时间】：2011-11-19 10:16:51
【问题描述】：

我编写了一些 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]);

            })
        }
});
}

【问题讨论】：

为什么循环内的超时不起作用？
尝试将超时设置在循环的最后，而不是在设置文本的函数中。
myArrayTwo 定义在哪里？

标签： jquery loops for-loop timeout

【解决方案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);

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

您真的不希望“在循环中”超时，您想在超时结束时更新数字，然后启动 另一个 将更新数字的超时，然后重复，直到满足您的结束条件。

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案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

【讨论】：