javascript - 为 FOR 循环中的每个迭代添加一个暂停/间隔

Question

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

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

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

Answer 1

要回答这个问题，要获得类似 sleep 功能的东西，您可以将这样的东西写成辅助函数

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，就像您在评论中发布的 Fiddle 中所做的那样