2

我非常抱歉又问了一个匿名函数问题,但是每次我弄清楚它们时,javascript都会给我抛出另一个曲线球。

我正在使用KineticJS创建许多圆圈,然后像这样为它们设置动画(按照这些教程

for ( i = 0; i < rows; i++ )
{
   for ( j = 0; j < cols; j++ )
   {
      index = i * cols + j;
      circles [ index ] = new Kinetic.Circle({...});
      ...
   }
}
...
for ( i = 0; i < rows; i++ )
{
   for ( j = 0; j < cols; j++ )
   {
      index = i * cols + j;
      anims [ index ] = new Kinetic.Animation({func: function ( frame )
            {
               ( function ( innerCircle )
               {
                  ...
               } ( circles [ index ] ) );
            },
            node: layer
         }
      );
   }
}

我的意图是index在创建匿名函数时传递当前值。问题是只有最后一张图片是动画的,我不知道为什么。这是完整的jsfiddle

4

1 回答 1

3

您应该创建新变量范围的函数位于错误的位置。它应该在被传递的函数之外,并且应该返回一个新函数。

返回的函数将有权访问所需的值。

for ( i = 0; i < rows; i++ )
{
   for ( j = 0; j < cols; j++ )
   {
      index = i * cols + j;
      anims [ index ] = new Kinetic.Animation({func: function(innerCircle) {
                                                        return function ( frame ) {

                                                        };
                                                      })(circles[index]),
            node: layer
         }
      );
   }
}

但老实说,不要像这样内联函数。当您创建一个返回您的函数的命名函数时,它变得更加清晰。

function makeFunc(innerCircle) {
    return function (frame) {
           // you can use innerCircle in here
    };
}

for ( i = 0; i < rows; i++ ) {
   for ( j = 0; j < cols; j++ ) {
      index = i * cols + j;
      anims [ index ] = new Kinetic.Animation({
         func: makeFunc(circles[index]),
         node: layer
      });
   }
}

有些人出于某种原因只是喜欢那些内联函数,但我认为它们只会增加混乱。命名函数会稍微分解代码,并在代码中添加一些文档。

此外,它的效率稍高一些,因为您没有在循环的每次迭代中创建一个新的内联函数。相反,您正在重用同一个来构建处理程序。

于 2012-10-10T21:25:45.857 回答