Question

可能重复：
Javascript closure inside loops - simple practical example

我有一个简单的问题。我正在使用HTML5 canvas元素，我有一个循环，在画布上绘制一系列框。这段代码工作正常：

for (var i = 0; i < this.boxes.length; i++) {
    this.drawBox(canvas, this.boxes[i]);
}

现在我想给盒子绘制循环添加一点延迟，所以我把循环更改为：

for (var i = 0; i < this.boxes.length; i++) {
     var me = this;
     var xcanvas = canvas;
     var box = this.boxes[i];
     var func = function () {
         me.drawBox(xcanvas, box);
     };
     window.setTimeout(func, i * 50);
  }

第二个循环只从this.boxes数组中抽取一个框（数组可以包含1到16个框）。源中的所有其他代码都相同。怎么会这样？

**详细的变量声明用于排除引用**

任何帮助都会非常感激。

Answer 1

我不知道你的问题的确切答案，但我在类似的情况下做的只是setInterval 50毫秒，然后在那个间隔函数clearInterval和setInterval再次50 * i ...行的东西以下：

var initialDelay = 50;
var counter = 0;
var intervalID;

intervalID = setInterval(myFunction(initialDelay), initialDelay);

myFunction(delay) {
     if (counter >= this.boxes.length) {
         clearInterval(intervalID);             
         //Clear interval and do nothing
     }
     clearInterval(intervalID);
     me.drawBox(xcanvas, box); //Do the stuff you want to do in your interval
     intervalID = setInterval(myFunction(delay * 50), initialDelay);
}

setInterval本质上就像一个循环。

setTimeout故障与直接呼叫

1 个答案: