jQuery – for循环中的超时

我写了一些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

首先，您需要在其自己的函数中放置执行工作的代码（显示随机数并决定是否应该继续）。 此函数也可以是RandomNumberGenerator的局部变量：

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

上面的函数将一个数字放在li.num ，递增i ，并告诉浏览器在两秒内再次调用该函数（使用setTimeout ） - 但li.num是我们显示的数字少于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 2

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

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

延迟函数中的代码不起作用。 只要您的代码正在运行，浏览器就不会显示任何更新，因此您必须在更改出现之前退出该function。

因此，您必须将工作分成可以使用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