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