如何在 for 循环中使用 setInterval 或 setTimeout？

Question

我试图在某些代码运行时设置一个时间间隔，但只需要根据元素的数量来设置。下面是一个简单示例：

总共 5 个元素

对于找到的每个元素，每 20 秒运行一次代码。

有人能给我一个如何使用纯 JavaScript 执行此操作的基本示例吗？我尝试过的所有操作都只是一次执行所有代码，而不是一次执行一个元素。

Answer 1

假设您正在谈论数组或 DOM 集合的元素

(function() {
   var arr = [...],
       len = arr.length;


   (function doProcess() {
       if (len--) {
           /* do something with arr[len] */
           setTimeout(doProcess, 20000);
       }
   })();    
})();

编辑：
如果您因任何原因无法反转数组，请使用下一个版本

(function() {
   var arr = [...],
       len = arr.length;


   (function doProcess(i) {
       if (i) {
            console.log(len - i);
           /* do something with arr[len - i] */
           setTimeout(function() { doProcess(--i); }, 20000);
       }
   })(len);    
})();

Answer 2

看这个例子： http://juixe .com/techknow/index.php/2005/10/28/put-javascript-to-sleep/

Answer 3

下面是我使用 jQuery 为图像制作动画的一些代码：

var enter = 500;
var show = 4000;
var exit = 300;
var direction1 = "right"; 
var direction2 = "left";
var logo = document.getElementById('Box1').getElementsByTagName('img');
var Num = $('#Box1 img').length;
var time_each = (enter+show+exit);
function startBox1(){
for(x=0;x<=Num-1;x++){
Box1(x);
}
}  
function Box1(x){
var buffer = time_each*x;
$(logo[x]).delay(buffer).show("slide", { direction: direction1 }, enter).delay(show).hide("slide", { direction: direction2 }, exit);
}
$(function(){
startBox1();
setInterval("startBox1()",(time_each)*Num);
});

技巧是设置一个缓冲区，该缓冲区等于当前动画的索引每个动画所花费的时间。 FOR 循环立即运行每个代码； .delay() 操作和缓冲区变量使得每个动画看起来好像一个接一个地发生。然后，setInterval() 在每个动画完成后调用 FOR 循环。它不断地重新启动该过程。

Answer 4

您必须定义一个函数，并且在函数内部需要为其自身设置超时。像这样：

var els = [1, 2, 3, 4, 5];

((function process_els(el_index) {
  var el = els[el_index];

  // do stuff to el here
  console.log(el);
  // do stuff to el above

  if (el_index + 1 < els.length) {
    setTimeout(function() { process_els(el_index + 1); }, 20000);
  }
})(0);