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

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

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

请注意，这不是最干净/更好的解决方案，但由于没有人发布您要求的内容，这里是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 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

jQuery - for循环中的超时

5 个答案: