Question

我有一个像这样设置的功能

awesomeFirePenguin: function(){
   // function does some stuff, not important
},

我在像这样的for循环中调用它

for (var i = 0; i < n; i++){
   this.awesomeFirePenguin();           
}

这个工作，该函数被称为n次，但函数的结果会立即显示在彼此之后。我想要的是将结果显示在彼此之后稍微延迟，例如100ms左右。像这样的东西

for (var i = 0; i < n; i++){
   this.awesomeFirePenguin(); 
   // wait a while and then continue    
}

我尝试使用

for (var i = 0; i < n; i++){
    window.setTimeout(this.awesomeFirePenguin(), 100);
}

和window.setInterval(this.awesomeFirePenguin(), 100);，但两者都只执行一次函数。

Answer 1

setTimeout和setInterval可以将函数作为参数，但您正在做的是调用它们。因此，他们不是接收函数，而是接收返回值作为参数。

如果你想延迟堆叠，你可以通过你当前所处的循环索引将超时延迟加倍。

for (var i = 0; i < n; i++){
    window.setTimeout(this.awesomeFirePenguin.bind(this), 100 * i);
}

Answer 2

answer by voithos可能是最简单的。您还可以使用Clumpy.js之类的异步执行库，您可以在其中编写代码：

var clumpy = new Clumpy({delay: 100});
var i;
clumpy.for_loop(
    function() { i = 0; },
    function() { return i < n; },
    function() { ++i; },
    this.awesomeFirePenguin
);

使用闭包和自调用函数也可以做到这一点，但这是难以理解的丑陋代码：

(function loop(i, f) {
   setTimeout(function () {
      f();
      if (--i) loop(i, f);
   }, 100)
}(n, this.awesomeFirePenguin));

可以使用setInterval而不是setTimeout来编写内容，但它并不容易理解，尽管它可能会消除递归调用。

在Javascript循环中等待

2 个答案: