为 FOR LOOP 中的每次迭代添加暂停/间隔答案

【问题标题】：Add a pause/interval to every iteration in a FOR LOOP为 FOR LOOP 中的每次迭代添加暂停/间隔
【发布时间】：2012-12-04 12:38:36
【问题描述】：

我想编写一个 for 循环，在每次迭代后以间隔打印数字 1 到 10 "like this"

我怎样才能实现它？我试过 sleep() setInterval() setTimeout(") 什么都没有，但似乎找不到任何可行的解决方案。如果可能的话，我想只使用纯 Javascript 来做到这一点。

function abc(){
    for(i=1;i<=10;i++){
        document.write(i+"<br>");
        sleep(1000);
    }
}

【问题讨论】：

所以要避免使用 setInterval()？
您尝试使用 setTimeout 和 setInterval 做什么？我们可以看看你的代码吗？
可能重复stackoverflow.com/questions/951021/…
setInterval 其实就是你需要的函数，这里。只需跟踪一个计数器，并在运行 X 次后取消设置间隔。
@Matthew Gilliard：我用这个code 让它工作了。我只是想知道如何使用 FOR LOOP 来做到这一点

标签： javascript for-loop iteration settimeout setinterval

【解决方案1】：

您可以将循环解构为递归函数并使用setTimeout 来实现暂停。

var i = 0;
var limit = 10;

function loop(){
    console.log(i);
    i++;
    if(i < limit)
    {

        setTimeout(loop, 100);
    }
}
loop();

【讨论】：

【解决方案2】：

要回答这个问题，要获得类似睡眠功能的东西，你可以写这样的东西作为辅助功能

function sleep(dur) {
 var d = new Date().getTime() + dur;
  while(new Date().getTime() <= d ) {
    //Do nothing
  }

}

console.log(new Date().getTime())
     sleep(1000)

 console.log(new Date().getTime())

那么你可以在每次迭代后调用sleep函数

function abc(){
    for(i=1;i<=10;i++){
        document.write(i+"<br>");
        sleep(1000);
    }
}

但请注意，sleep 将在此时冻结您的浏览器，并且当你只想定期做某事时，你真的不想要这种行为

window.setInterval 在这种情况下就是你想要的

    function abcd(i){
       document.write(i + "<br>")
    }


function repeatedTimeout(func,times,duration) {
    var args = Array.prototype.slice.call(arguments).splice(3);
    var i = 0;
    args.push(i)
    var wrap = function () {
     if(args[args.length - 1] >= times)
       window.clearInterval(wrap)
      else {

         func.apply(this,args)
         args[args.length - 1]++
       }
    }
    window.setInterval(wrap,duration)
}
repeatedTimeout(abcd,10,1000)

每 1000 毫秒调用 10 次，而不会冻结浏览器

这是JSBin

更新

如果它真的必须是一个 for 循环，你可以做这样的事情，不管它对我有什么意义

for (var i = 0; i <= 10 ; i++) {
  window.setTimeout(
    (function (i){ 
      return function() {
        document.write(i + "<br>")
      }
    })(i),i * 1000)
  }

这里是另一个JSBin

这将在for 循环中调用window.setTimeout，并以i 作为超时的倍数，这可行，但我宁愿建议使用setInterval，就像你在评论中发布的小提琴中所做的那样

【讨论】：

在 while(...) 中循环将在条件为真时锁定 CPU。
Thx =)，我知道，我添加它是因为他要求像睡眠功能这样的东西，我正在编辑答案以指出这一点并添加更多东西，但这花了我一段时间跨度>
感谢您的回答和您的努力。我使用这个“CODE”让它工作我真正感兴趣的是使用 for 循环来做这件事。我不需要使用“睡眠”。
为什么一定要for循环？
@user1688606 更新了答案

【解决方案3】：

由于浏览器中 JavaScript 的大部分异步（和单线程）性质，sleep() 等构造不是可行的方法。

您可以使用setTimeout() 编写一个通用函数，该函数将执行循环，然后传入应该每隔 x 毫秒运行一次的函数。至少你会有一个可重用的容器，你可以在其中运行你的代码。

function loopn(n, fn, delay)
{
    if (n > 0) {
        fn();
        if (n > 1) {
            setTimeout(function() {
                loopn(n - 1, fn, delay);
            }, delay);
        }
    }
}

loopn(10, function() {
    console.log('hello there');
}, 1000);

【讨论】：