addeventlistener를 올바르게 추가하는 방법은 무엇입니까?

Question

로드 이벤트를 캐치하는 이미지 이벤트 리스너가있는 배열에 추가하려고 시도하면 작동합니다. (이 내부 핸들러가 아닌 경우)

가

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

하지만 경고 항상 정확한 키 수를 반환 :하지만 가끔은 내가 감소 함수에 전달 매개 변수는 모든 요청 예를 들어

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(); 
    } 
} 

내가 얻을에 대해 동일 .

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

이 올바른지,하지만 난 더 읽을 수 있습니다 대체 솔루션 표시 할 수 있습니다 생각 : vectors는 jQuery를 객체 또는 일반 JS 배열 인 경우 그것은 문제가 명확하지

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'; 
    } 
}); 

을, 그래서 나는 안전한 가정을 취하고 $.each()을 사용했습니다. vectors이이고 jQuery 객체 인 경우 .each()을 대신 사용할 수 있습니다.

기타 수정 :

• Don't use for... in to iterate over arrays.
• 그냥 당신이 jQuery를 사용하고 jQuery('#canvas-' + i).length
• 의 truthiness을 확인 - 왜 document.getElementById()를 사용할 수 있습니까?
• 다시 말하지만 jQuery를 사용하고 있습니다. addEventListener()을 사용하는 이유는 무엇입니까?