javascript - 将变量值传递给 JavaScript 实时事件

Question

嗯，这是非常基本的，但我无法独自找到答案。所以希望大家能够帮助我。

我试图将一个事件绑定(bind)到一个对象数组，但不知何故传递的变量是最后一个。经过迭代后。

for (var i = 0; i < map_object.length; i++) {
    map_object[i].on('mousedown', function(){
        var x = i;
            setEvent(this, x);
        });
};

function setEvent(data, i){
    console.log(data);
    var x = i;
    console.log(x);
}

数据是按值传递的，因此它总是动态返回，同时(i变量)作为引用传递。

所以当它执行时我总是得到这个结果

data = (some object) {expected result}

i = 9 {unexpected} = map_object.length

我无法确定这是因为 (i) 作为引用传递，还是因为实时事件是在迭代完成后执行的。

on函数来自Fabricjs

Answer 1

我发现 [].forEach 在这些情况下使用起来更加简洁，并且它通过在循环中没有内部函数来减少闭包:

[].forEach.call( map_object, function(ob, i){ // replace loop with forEach
    ob.on('mousedown', function(){
        var x = i;
        setEvent(this, x);
    });
});

function setEvent(data, i){
    console.log(data);
    var x = i;
    console.log(x);
}

对我来说，forEach() 感觉比无作用域 for 循环延迟函数所强加的繁琐内容要少一些“附加”...

编辑:

如果你有 jQuery 或类似的东西，实际上有一个更好的方法来做到这一点而不需要循环:

$("body").on('mousedown', function(){
     var x = map_object.indexOf(this);
     if(x > -1) setEvent(this, x);
});

function setEvent(data, i){
    console.log(data);
    var x = i;
    console.log(x);
}

这做同样的事情，但允许您在初始运行后动态添加/删除项目，这是运行一次的 for 循环和单独的事件处理程序无法做到的。