如何正确添加addeventlistener？

Question

我尝试使用捕获负载事件的图像事件监听器添加到数组中，并且有效。 但是有时我传递给减量函数的参数对于所有请求都是相同的

var imgNumb = vectors.length;
function decrement(i, type){
    imgNumb--;
    console.log('Processed '+ type+' nr: ' + i + '. Left: '+ imgNumb);
}
for(var i in vectors)
{
    if(jQuery('#canvas-'+i).length != 0){
    var tempCont = document.getElementById('canvas-'+i);
    tempImage[i] = new Image();
    alert(i);
    tempImage[i].addEventListener('load', function(){
        decrement(i, 'canvas');
    }, false);
    type[i] = 'canvas';
       tempImage[i].src = tempCont.toDataURL();
    }
}

例如我得到：

Processed canvas nr: 1. Left: 2
Processed canvas nr: 2. Left: 1
Processed canvas nr: 2. Left: 0

但是警报（如果它不在处理程序内部）始终返回正确的密钥号。

Answer 1

您正在循环中创建一个函数，该函数取决于循环变量。 所有函数都引用相同的 i 。 您必须引入一个新的作用域（通过调用一个函数）来捕获变量的当前值：

(function(index) {
    tempImage[index].addEventListener('load', function(){
        decrement(index, 'canvas');
    }, false);
}(i));

在这里，我们使用立即或自调用函数 。

---

请勿for...in数组上进行迭代 。 使用普通的for循环。

Answer 2

@Felix的答案是正确的，但我认为我可能会展示一种更具可读性的替代解决方案：

var imgNumb = vectors.length,
    tempImage = [];

function decrement(i, type) {
    imgNumb--;
    console.log('Processed ' + type + ' nr: ' + i + '. Left: ' + imgNumb);
}

$.each(vectors, function(i, element) {
    var $canvas = $('#canvas-' + i);
    if ($canvas.length) {
        tempImage[i] = $('<img/>', {
            src: $canvas.get().toDataURL(),
            load: function() {
                decrement(i, 'canvas');
            }
        });
        type[i] = 'canvas';
    }
});

这个问题尚不清楚， vectors是jQuery对象还是纯JS数组，因此我采用了安全的假设并使用了$.each() 。 如果vectors 是一个jQuery对象，则可以改用.each() 。

其他修复：

• 不要for... in遍历数组。
• 只需检查jQuery('#canvas-' + i).length的真实性jQuery('#canvas-' + i).length
• 您正在使用jQuery-为什么要使用document.getElementById() ？
• 同样，您使用的是jQuery-为什么要使用addEventListener() ？