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";

令我惊讶的是,执行时显示的对话框在Firefox 7中读取4,4,4,4和在IE 9中读取4,3,2,4.我很困惑因为我认为JS是单线程的,因此是一个事件处理程序不应该打断另一个.捕获(或我的错误)在哪里？

提前致谢.此致,Tomek

Answer 1

所有JS事件处理程序都是单线程的.一个人在上一个完成之前不会开始.它都通过事件队列工作.当一个事件结束时,JS引擎会查看队列中是否有另一个事件,如果是,则开始执行该事件.

例如,当一个计时器触发指示计时器事件的时间时,它将事件放入队列中,当当前正在执行的JS事件完成并且计时器事件到达队列顶部时,该计时器事件的代码将触发.

有关Javascript事件队列的进一步讨论,请参阅此文章.

使用本机OS网络在后台加载图像.可以一次加载多个图像. .onload()处理程序一次只能触发一个,但由于图像同时加载,因此无法保证代码中的加载顺序与您一样.此外,警报可以影响时间,因为它们阻止了javascript的执行,但是不阻止执行图像加载.

我不明白4,4,4,4或4,3,2,4序列.他们都应该显示4,3,2,1.您必须向我们展示一个完全可用的代码版本,以了解导致该问题的原因.我猜你要么对你的变量有一些范围问题,要么跟踪你的代码中发生的事件的数量,而不是你在问题中披露的数量.

你可以在这里看到这种代码的工作版本:http://jsfiddle.net/jfriend00/Bq4g3/.