如何正確添加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() ？