Javascript event loop. Clarification needed

Question

I am reading this:

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

There's this quote:

"the single thread of execution asks the runtime to perform an operation, providing a callback function and then moves on to do something else. When the operation has been completed, a message is enqueued along with the provided callback function. At some point in the future, the message is dequeued and the callback fired."

So an example of what is going on here in my mind is this:

console.log("x")
someAjaxCall(function({
callbackcode
})
console.log("y")

Questions:
1) someAjaxCall is the operation right and callbackcode is the callback?
2) So basically when someAjaxCall is called, a message is enqueued that points to the callbackfunction correct? After console.log("y") is called or when the stack is emptied, the message is dequeued and the callback/callbackcode is fired?

Then there's this quote:

"The decoupling of the caller from the response allows for the JavaScript runtime to do other things while waiting for your asynchronous operation to complete and their callbacks to fire."

3) What is the runtime? What does that mean? I just take it to mean that the callstack can resume execution and when it empties... the messages can then dequeue?

The answer to this question [How does JavaScript handle AJAX responses in the background?](http://stackoverflow.com/questions/7575589/how-does-javascript-handle-ajax-responses-in-the-background/7575649#7575649) probably answers most of what you're asking. This question is perhaps even a dup of that one. — jfriend00, Jul 04 '15 at 05:07

score 0 · Answer 1 · answered Jul 04 '15 at 05:09

Javascript runtime is the software that executes all the Javascript code. What this means is that while Javascript is waiting for a response to the AJAX call, it can run other things. For instance, you can display "Please wait..." with a spinner while waiting for the server to perform a lengthy database query. When the response is received, the callback will be executed, and it can stop the spinner and display the data.

score 0 · Answer 2 · answered Jul 04 '15 at 05:09

Think of the JavaScript engine as looking something like this behind the scenes:

while(true) {
    var event = updateUIAndDoNetworkingStuffAndWaitForIncomingEvent();
    if(event.hasJavaScriptHandler) {
        event.runJavaScriptHandlerForEvent();
    }
}

At some point, your code runs. You console.log("x"), run the someAjaxCall function, and then run console.log("y"). Internally, someAjaxCall is probably modifying some state you can’t see that tells the browser “hey, when you get to updateUIAndDoNetworkingStuffAndWaitForIncomingEvent, as part of your ‘doing network stuff’, also do this HTTP request, and when you’re done, fire an event”. As part of that record, it stores your callback function. Then, some few times later through the loop, updateUIAndDoNetworkingStuffAndWaitForIncomingEvent sees that the HTTP request or whatever has completed, and it returns an event saying “hey, that HTTP request you asked me to do a while ago—well, it finished!” The code following it then notices that there was a callback it stowed away and calls that, and your code resumes execution inside of the callback you passed to someAjaxCall.

Javascript event loop. Clarification needed

2 Answers2