“for”中的 Javascript Draggables 回调函数问题陈述

Question

我定义了一个数组：

images_array[0]=['c5','user.png','100','100'];
images_array[1]=['c6','user.png','300','400'];
images_array[2]=['c7','mega1.jpg','400','500'];

像这样创建可拖动对象：

drag_array[images_array[0][0]]=new Draggable(images_array[0][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[0][0]]);}});

drag_array[images_array[1][0]]=new Draggable(images_array[1][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[1][0]]);}});

drag_array[images_array[2][0]]=new Draggable(images_array[2][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[2][0]]);}});

在 for 语句中创建可拖动对象不适用于回调函数...

for (i=0;i<images_array.length;i++) {
drag_array[images_array[i][0]]=new Draggable(images_array[i][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[i][0]]);}});
}

=> Firefox 说 images_array[i][0] 未定义... 去掉回调函数

drag_array[images_array[i][0]]=new Draggable(images_array[i][0], { revert: true});

=>有效...:(

知道为什么回调函数的最新参数不起作用吗？ TX

Answer 1

这是一个典型的错误：在循环中定义函数。如果您定义一个可以访问循环变量i的函数，那么当该函数定义时，该变量不会计算，但当它被定义时，该变量不会计算。 打电话。但此时，循环已经完成，并且 i 有一些不需要的值（在您的情况下 images_array.length + 1）。 JavaScript 只有函数作用域，而不是块作用域。

您必须通过例如使用立即函数来捕获 i 的值：

for (i=0;i<images_array.length;i++) {
    drag_array[images_array[i][0]] = new Draggable(
            images_array[i][0], 
            { revert: true, 
              onEnd: (function(index) {
                         return function(){
                             displaymessage(drag_array[images_array[index][0]]);
                         };
                     }(i))
            });
}

另请参阅傻瓜式闭包，示例 5 和 这里有很多关于SO的问题。