setTimeout故障与直接调用[重复]

Question

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

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

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 本质上就像一个循环。