Javascript 与在For循环中注册事件相关的问题

我在Famo.us框架中有一个小应用程序。我已经在mainContext中添加了四个图像，并使用四个循环添加了可拖动的修改器。我想在用户拖动事件时触发一个事件，因为我添加了以下代码

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var MouseSync = require("famous/inputs/MouseSync");
var StateModifier = require('famous/modifiers/StateModifier');
var Draggable = require("famous/modifiers/Draggable");
var ImageSurface    = require('famous/surfaces/ImageSurface');
var Transitionable = require("famous/transitions/Transitionable");
var SnapTransition = require("famous/transitions/SnapTransition");
Transitionable.registerMethod('snap', SnapTransition);
// create the main context
var mainContext = Engine.createContext();
var mouseSync = new MouseSync();

var isPlus;
var isFirst = true;

var oldValues = [];
var mySurfaces=[];
var draggables = [];
var myModifiers= [];

var images = [
    ['img/svelteMan.png', -0.4375 * window.innerWidth, -1.5 * window.innerWidth], 
    ['img/swimmer.png', 0 * window.innerWidth, -0.96875 * window.innerWidth], 
    ['img/soccerPlayer.png', -0.21875 * window.innerWidth, -0.984375 * window.innerWidth], 
    ['img/breakDancer.png', 0 * window.innerWidth, -0.6875 * window.innerWidth]
];

for(var i=0;i<images.length;i++) {
    var mySurface = new ImageSurface({ });
    mySurface.setContent(images[i][0]);

    var myModifier = new StateModifier({
        origin: [0.5, 0.5]
    }); 

    var draggable = new Draggable({ });
    mySurface.pipe(draggable);
    mySurfaces.push(mySurface);     
    myModifiers.push(myModifier);
    draggables.push(draggable);

    mainContext.add(draggables[i]).add(myModifiers[i]).add(mySurfaces[i]);

    var oldValue =0;
    oldValues.push(oldValue);
}

ActivateEvent();
function ActivateEvent(){
    for(var i=0;i<images.length;i++) {  
        draggables[i].on('update', function (data) {
            MakeMove(i);
        }); 
    }
};

function MakeMove(i) {
    //alert(i);
    if (oldValues[i] > draggables[i].getPosition()[0]) {
        myModifiers[i].setTransform(Transform.rotateZ(-0.1));
    } else {
        myModifiers[i].setTransform(Transform.rotateZ(0.1));
    }
    oldValues[i] = draggables[i].getPosition()[0];      
}

var-Engine=require（'著名/核心/引擎'）；
var表面=要求（“著名/核心/表面”）；
var Transform=require（‘著名/核心/转换’）；
var MouseSync=require（“著名的/inputs/MouseSync”）；
var StateModifier=require（'著名的/modifiers/StateModifier'）；
var Draggable=require（“著名/修改人/可拖动”）；
var ImageSurface=require（‘著名的/surfaces/ImageSurface’）；
var可转换=要求（“著名/转换/可转换”）；
var SnapTransition=require（“著名的/transitions/SnapTransition”）；
Transitionable.registerMethod（'snap'，SnapTransition）；
//创建主上下文
var mainContext=Engine.createContext（）；
var mouseSync=新的mouseSync（）；
var isPlus；
var isFirst=true；
var oldValues=[]；
var mySurfaces=[]；
var draggables=[]；
var myModifiers=[]；
变量图像=[
['img/svelteMan.png'，-0.4375*window.innerWidth，-1.5*window.innerWidth]，
[img/swimer.png'，0*window.innerWidth，-0.96875*window.innerWidth]，
['img/soccerPlayer.png'，-0.21875*window.innerWidth，--0.984375*window.innerWidth]，
['img/breakDancer.png'，0*window.innerWidth，-0.6875*window.innerWidth]
];
对于（var i=0；i添加一个：

var cl=函数（n）{
返回函数（数据）{
MakeMove（n）；
};
};
对于（var i=0；i您有一个闭包问题。
看看这个：

var draggables = [];
for(i=0;i<10;i++) {
    var draggable = new Draggable({ });
    draggables.push(draggable);
}

ActivateEvent();

function ActivateEvent(){

    for(var i=0;i<10;i++) {  
       setTimeout(function() {
           MakeMove(i);         
       }(i),0);        //<----- notice the (i), this how you can send the correct loop for     MakeMove function, without that (i) the anonymous function scope breaks the loop 
     }
}

function MakeMove(i) {
 console.log(draggables[i]); //==> this outputs the draggables
}

var draggables=[]；
对于（i=0；i这如何解决
draggables[i]未定义的事实？
？我怀疑这将解决OP的问题。问题是原始代码正在调用
MakeMove（i）
和
i
太高，因为它是
for
循环中
i
的最后一个值。@Barmer闭包在这种情况下可以正常工作，因为它将存储当前上下文而不是最后一个值。相同类型的小提琴示例（@Barmar，是的。这就是为什么我还没有更新答案。由于OP没有指定错误行，我（可能是错误的）假设它在
MakeMove
中。你的最后一个代码块中的
for
循环与你的其余代码在同一个文件中吗？@Barmar：这不是问题所在。错误在于
draggables[i]
未定义，这与“臭名昭著的循环问题”无关所以，这个重复标记是不正确的。谢谢，误解了这个问题。错误发生在哪一行？是
draggables[i]。在（…）
上还是
if（oldValues[i]>draggables[i].getPosition（）[0]）
。如果是后者，那就是臭名昭著的循环问题。是的，我在draggables[i]上遇到了一个错误。在（…）
var cl = function(n) {
    return function(data){
        MakeMove(n);
    };
};

for(var i=0;i<images.length;i++)
{   
    draggables[i].on('update', cl(i)); 
}

var draggables = [];
for(i=0;i<10;i++) {
    var draggable = new Draggable({ });
    draggables.push(draggable);
}

ActivateEvent();

function ActivateEvent(){

    for(var i=0;i<10;i++) {  
       setTimeout(function() {
           MakeMove(i);         
       }(i),0);        //<----- notice the (i), this how you can send the correct loop for     MakeMove function, without that (i) the anonymous function scope breaks the loop 
     }
}

function MakeMove(i) {
 console.log(draggables[i]); //==> this outputs the draggables
}

draggables[i].on('update', function (data) {
    MakeMove(i);
}(i));      <----- now the loop is send to makeMove