超时后循环中的javascript变量作用域/闭包

Question

现在已经很晚了，我大脑中道格拉斯·克罗克福德居住的部分已经关闭。我尝试了一些方法，但没有达到预期效果。

我有一个 Canvas ，我在其中画了两条线，然后在计时器上淡出它们，但只有循环中的最后一行淡出。这是我的 fiddle ，向下查看 JS 中的第 50 行，在右下 Pane 中拖动鼠标来查看它的实际情况:

http://jsfiddle.net/mRsvc/4/

这就是函数，基本上超时只获取循环中的最后一个值，我以前见过这个，我确信如果我不是那么疯狂，它可能会更简单。具体功能如下:

function update()
        {
            var i;
            this.context.lineWidth = BRUSH_SIZE;            
            this.context.strokeStyle = "rgba(" + COLOR[0] + ", " + COLOR[1] + ", " + COLOR[2] + ", " +  BRUSH_PRESSURE + ")";
            for (i = 0; i < scope.painters.length; i++)
            {
                scope.context.beginPath();
                var dx = scope.painters[i].dx;
                var dy = scope.painters[i].dy;
                scope.context.moveTo(dx, dy);   
                var dx1 = scope.painters[i].ax = (scope.painters[i].ax + (scope.painters[i].dx - scope.mouseX) * scope.painters[i].div) * scope.painters[i].ease;
                scope.painters[i].dx -= dx1;
                var dx2 = scope.painters[i].dx;
                var dy1 = scope.painters[i].ay = (scope.painters[i].ay + (scope.painters[i].dy - scope.mouseY) * scope.painters[i].div) * scope.painters[i].ease;
                scope.painters[i].dy -= dy1;
                var dy2 = scope.painters[i].dy;
                scope.context.lineTo(dx2, dy2);
                scope.context.stroke();
                for(j=FADESTEPS;j>0;j--)
                {
                    setTimeout(function()
                        {
                            var x=dx,y=dy,x2=dx2,y2=dy2;
                            scope.context.beginPath();
                            scope.context.lineWidth=BRUSH_SIZE+1;
                            scope.context.moveTo(x, y);
                            scope.context.strokeStyle = "rgba(" + 255 + ", " + 255 + ", " + 255 + ", " + .3 + ")";
                            scope.context.lineTo(x2, y2);
                            scope.context.stroke();
                            scope.context.lineWidth=BRUSH_SIZE;
                        },
                    DURATION/j);
                }
            }
        }

Answer 1

问题在于您在传递给 setTimeout() 的函数中引用的变量 dx、dy 等已定义在周围范围内以及任何超时实际运行时，这些变量都保存循环上次迭代的值。

您需要创建一个额外的包含函数来关闭每次迭代的值。尝试如下操作:

for(j=FADESTEPS;j>0;j--) {
   (function(x,y,x2,y2) {
      setTimeout(function() {
         scope.context.beginPath();
         scope.context.lineWidth=BRUSH_SIZE+1;
         scope.context.moveTo(x, y);
         scope.context.strokeStyle = "rgba(" + 255 + ", " + 255 + ", " + 255 + ", " + .3 + ")";
         scope.context.lineTo(x2, y2);
         scope.context.stroke();
         scope.context.lineWidth=BRUSH_SIZE;
      },
      DURATION/j);
   })(dx, dy, dx2, dy2);
}

这会为 j=FADESTEPS 循环的每次迭代创建一个新的匿名函数，立即执行它并传递 dx 等当时的值循环的每次迭代都会运行，并将 x、y 等变量从现有函数中移出，并使它们成为新函数的参数，这样到了超时运行它将使用正确的值。