Can JS event handlers interrupt execution of another handler?

Question

I have the following problem. I've created a class in whose constructor I'm loading a couple of images and I need to delay the remaining initializations until they are completely loaded. The code I used is as follows (an excerpt from the constructor):

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

To my surprise, when executed the displayed dialogs read 4,4,4,4 in Firefox 7 and 4,3,2,4 in IE 9. I'm confused becaused I believed that JS is single-threaded and thus one event handler should not interrupt another. Where's the catch (or my mistake)?

Thanks in advance. Best regards, Tomek

try switching between the lines 'src' and 'onload'.

CamelCamelCamel
– CamelCamelCamel

2011-11-04 21:38:03 +00:00
Commented Nov 4, 2011 at 21:38 — CamelCamelCamel
– CamelCamelCamel, Commented Nov 4, 2011 at 21:38

Community · Accepted Answer · 2017-05-23 11:53:21Z

7

All JS event handlers are single threaded. One will not start until the previous one finishes. It all works through an event queue. When one event finishes, the JS engine looks to see if there's another event in the queue and, if so, starts execution of that event.

For example, when a timer fires indicating it's time for a timer event, it puts the event in the queue and it the code for that timer event fires when the currently executing JS event is finished and the timer event gets to the top of the queue.

See this post for further discussion of the Javascript event queue.

Images load in the background using native OS networking. Multiple images can be loading at once. .onload() handlers will only fire one at a time, but since images load simultaneously, there is no guarantee of load order in code like you have. Further, alerts can influence the timing because they block execution of javascript, but don't block execution of image loading.

I don't understand either the 4,4,4,4 or the 4,3,2,4 sequence. They both should show 4,3,2,1. You'd have to show us a fully working version of code to know what is causing that. I'd guess that you either have scoping issues with your variables that keep track of the count of there's more going on in your code than you've disclosed in your question.

You can see a working version of this kind of code here: http://jsfiddle.net/jfriend00/Bq4g3/.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Nov 4, 2011 at 21:57

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tomdz Over a year ago

It might be something weird about the alert function. console.log gives the correct 4,3,2,1 output, even when used next to alert. Also, I have noticed that the == 0 condition is properly resolved even when alerts read 4,4,4,4...

Collectives™ on Stack Overflow

Can JS event handlers interrupt execution of another handler?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related