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

要回答这个问题，要获得类似睡眠功能的东西，你可以写一些像这样的辅助函数

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

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

Answer 2

由于浏览器中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);

Answer 3

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

var i = 0;
var limit = 10;

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

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

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

3 个答案:

更新