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是单线程的，因此一个事件处理程序不应该中断另一个捕获（或我的错误）在哪里？

提前致谢。最好的祝福，托梅克

Answer 1

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

例如，当计时器触发指示计时器事件的时间时，它会将事件放入队列中，当当前正在执行的JS事件结束且计时器事件到达顶部时，该计时器事件的代码将触发队列。

有关Javascript事件队列的进一步讨论，请参阅this post。

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

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

您可以在此处查看此类代码的有效版本：http://jsfiddle.net/jfriend00/Bq4g3/。

JS事件处理程序能否中断另一个处理程序的执行？

1 个答案: