0

可能重复：
循环内的 Javascript 闭包 - 简单的实际示例

我有一个简单的问题。我正在使用 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 个框）。源代码中的所有其他代码都是相同的。怎么会这样？

** 详细的变量声明用于对引用进行故障排除 **

任何帮助将不胜感激。

4

1 回答 1

0

我不知道您的问题的确切答案，但我在类似情况下所做的只是将 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 本质上就像一个循环。

于 2012-06-20T02:43:08.060 回答