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

這裏我們使用的立即或自調用函數。

---

Don't use for...in to iterate over arrays。使用正常的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()代替。

其他修正：

• Don't use for... in to iterate over arrays.
• 只是檢查的jQuery('#canvas-' + i).length
• 你使用jQuery的感實性 - 爲什麼要用document.getElementById()？
• 同樣，你正在使用jQuery - 爲什麼使用addEventListener()？