JS 이벤트 핸들러가 다른 핸들러의 실행을 인터럽트 할 수 있습니까?

Question

다음과 같은 문제가 있습니다. 누구의 생성자에서 두 개의 이미지를로드하는 클래스를 만들었고 완전히로드 될 때까지 나머지 초기화를 지연해야합니다. 놀랍게도

var self = this; 
var imagesToLoad = 4; 

var finishInit = function() { 
    alert(imagesToLoad); 
    imagesToLoad--; 
    if (imagesToLoad == 0) { 
     // remaining initializations 
    } 
} 

this._prevIcon = new Image(); 
this._prevIcon.onload = finishInit; 
this._prevIcon.src = "img1.png"; 
this._nextIcon = new Image(); 
this._nextIcon.onload = finishInit; 
this._nextIcon.src = "img2.png"; 
this._pauseIcon = new Image(); 
this._pauseIcon.onload = finishInit; 
this._pauseIcon.src = "img3.png"; 
this._playIcon = new Image(); 
this._playIcon.onload = finishInit; 
this._playIcon.src = "img4.png"; 

, 실행 표시 대화 상자가 파이어 폭스 7 4,3,2,4에 4,4,4,4를 읽어 : (생성자에서 발췌) 다음과 같이 내가 사용하는 코드는 IE 9에서 JS가 단일 스레드로 간주되어 한 이벤트 핸들러가 다른 스레드를 인터럽트해서는 안된다고 생각해서 혼란 스럽습니다. 캐치 (또는 실수)는 어디에 있습니까?

미리 감사드립니다. 감사합니다. Tomek

Answer 1

모든 JS 이벤트 처리기는 단일 스레드입니다. 하나는 이전 하나가 끝날 때까지 시작되지 않습니다. 그것은 모두 이벤트 대기열을 통해 작동합니다. 한 이벤트가 끝나면 JS 엔진은 대기열에 다른 이벤트가 있는지 확인한 후 해당 이벤트의 실행을 시작합니다.

예를 들어, 타이머 이벤트가 발생했음을 나타내는 타이머가 발생하면 현재 실행중인 JS 이벤트가 완료되고 해당 타이머 이벤트가 발생하면 해당 타이머 이벤트의 코드가 실행됩니다. 대기열의 맨.

자바 스크립트 이벤트 대기열에 대한 자세한 내용은 this post을 참조하십시오.

이미지는 네이티브 OS 네트워킹을 사용하여 백그라운드에서로드됩니다. 한 번에 여러 이미지를로드 할 수 있습니다. .onload() 핸들러는 한 번에 하나씩 만 실행하지만 이미지가 동시에로드되기 때문에 코드에로드 순서가 있다는 보장은 없습니다. 또한 알림은 자바 스크립트의 실행을 차단하지만 이미지로드 실행을 차단하지 않기 때문에 타이밍에 영향을 미칠 수 있습니다.

4,4,4,4 또는 4,3,2,4 시퀀스를 이해할 수 없습니다. 둘 다 4,3,2,1을 보여야합니다. 무엇이 그 원인인지 알기 위해서는 코드의 완전한 버전을 보여 주어야합니다. 나는 당신이 당신의 질문에 당신이 공개 한 것보다 당신의 코드에서 더 많은 일이 일어나고 있다는 것을 추적하는 당신의 변수에 범위 지정 이슈가 있다고 생각합니다.

이 코드의 작동 버전은 http://jsfiddle.net/jfriend00/Bq4g3/입니다.