javascript asynchronous call and single threaded model

Question

During the execution phase in javascript timeline, events occur which invokes registered event handlers asynchronously. As per my knowledge in asynchronous calls the program execution doesn't wait for the completion of a task instead it moves onto the next task. So can anyone explain how does javascript handle asynchronous execution of 2 event handler functions registered to a single event on its occurrence?

For eg:
    window.addEventListener("load",function(){console.log("onload event 1 called!");},false);
    window.addEventListener("load",function(){console.log("onload event 2 called!");},false);

Does javascript interpreter just invokes the first event handler and moves on to the second event handler and execution part of first event handler is performed by another thread?

And I have read that javascript follows single threaded model so how does that fit in?

Possible duplicate of [Are event handlers in JavaScript called in order?](http://stackoverflow.com/questions/2706109/are-event-handlers-in-javascript-called-in-order) — Matt Thomas, Oct 17 '15 at 16:35
Asynchronous ≠ parallel, it just means you're not blocking the rest application until something happens. Besides, the DOM event loop *is* blocking in a way: when an event fires, all listeners are called before anything else can happen (in particular, before any other event can be fired). — Touffy, Oct 17 '15 at 17:02

score 2 · Answer 1 · answered Oct 17 '15 at 16:34

2

As per my knowledge in asynchronous calls the program execution doesn't wait for the completion of a task instead it moves onto the next task.

Asynchronous calls happen when you wait for an event to happen. The JavaScript engine gets on with other tasks until that event triggers the asynchronous callback.

Does javascript interpreter just invokes the first event handler and moves on to the second event handler

Yes

execution part of first event handler is performed by another thread

No. The functions are run sequentially, not simultaneously.

And I have read that javascript follows single threaded model so how does that fit in?

That enforces the sequential operation.

answered Oct 17 '15 at 16:34

Quentin

914,110
126
1,211
1,335

So what will the sequence with respect to invocation and execution? – ronak_11 Oct 17 '15 at 16:41
It will run the functions sequentially, as I said. – Quentin Oct 17 '15 at 16:42
@ronak_11 the runtime basically just issues a function call to each handler in turn. When a handler function returns the runtime moves on to the next one. – Pointy Oct 17 '15 at 16:56

score 0 · Answer 2 · answered Oct 17 '15 at 17:58

Javascript is single threaded so only one piece of javascript code is executing at any time. However the browser itself is multithreaded. You can verify this by creating a page with some blinking CSS that calls a javascript alert(). Even while the javascripts waits for the user to click "OK", the text will continue blinking.

This also allows the browser to queue up events even though the javascript thread is occupied. You can verify that this is the case with the following code:

function clickit()
{
    var start = Date.now();
    do
    {
    } while(Date.now() < start + 3000);
    console.log("done",start,Date.now());
}

...

<body onclick="clickit()"></body>

If this page is rapidly clicked, it produces the following results:

done 1445104179091 1445104182091
done 1445104182098 1445104185098
done 1445104185099 1445104188099
done 1445104188099 1445104191099
done 1445104191099 1445104194099

As you can see, although after the first click, the javascript thread was entirely busy until 3 seconds elapsed, the browser thread continued to function and was able to queue additional click events which were then executed as soon as the clickit() function ended.

In your example, when the page loads, the browser thread places two events in javascript's event queue. Then since javascript is idle it begins to process the event queue. It starts at the top and processes the first function. Then when it finishes with that it goes back to being idle so it goes back to processing the event queue. At this point the second function is one the top, so it runs the second function.

javascript asynchronous call and single threaded model

2 Answers2