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