Rectangle 27 0

javascript Understanding the Event Loop?


//Let's say this code is running in tick 1
fs.readFile("/home/barney/colors.txt", function (error, data) {
  //The code inside this callback function will absolutely NOT run in tick 1
  //It will run in some tick >= 2
});
//This code will absolutely also run in tick 1
//HOWEVER, typically there's not much else to do here,
//so at some point soon after queueing up some async IO, this tick
//will have nothing useful to do so it will just end because the IO result
//is necessary before anything useful can be done

1: If we are talking about a single-threaded application, then what processes setTimeouts while JS engine accepts more requests and executes them? Isn't that single thread will continue working on other requests? Then who is going to keep working on setTimeout while other requests keep coming and get executed.

2: If these setTimeout will get executed behind the scenes while more requests are coming and in and being executed, the thing carry out the async executions behind the scenes is that the one we are talking about EventLoop?

3: How can JS Engine know if it is an async function so that it can put it in the EventLoop?

4 The Event Loop is a queue of callback functions. When an async function executes, the callback function is pushed into the queue. The JavaScript engine doesn't start processing the event loop until the code after an async function has executed.

@SheshPai it's too confusing for everyone to discuss code when written in paragraphs of English. Just post a new question with a code snippet so people can answer based on code instead of a description of code, which leaves a lot of ambiguity.

A key thing to understand is that node relies on the OS for most of the heavy lifting. So incoming network requests are actually tracked by the OS itself and when node is ready to handle one it just uses a system call to ask the OS for a network request with data ready to be processed. So much of the IO "work" node does is either "Hey OS, got a network connection with data ready to read?" or "Hey OS, any of my outstanding filesystem calls have data ready?". Based upon its internal algorithm and event loop engine design, node will select one "tick" of JavaScript to execute, run it, then repeat the process all over again. That's what is meant by the event loop. Node is basically at all times determining "what's the next little bit of JavaScript I should run?", then running it. This factors in which IO the OS has completed, and things that have been queued up in JavaScript via calls to setTimeout or process.nextTick.

Can you please elaborate? Let us say I have two callbacks and the first one has a changeColor method with execution time of 10mS and a setTimeout of 1 minute and the second has a changeBackground method with execution time of 50ms with a setTimeout of 10 seconds. I feel the changeBackground with be in the Queue first and the changeColor will be next. After that the Event loop picks the methods synchronously. Am I right?

Generally it will go to the end of the queue, but the semantics of process.nextTick vs setTimeout vs setImmediate are subtly different, although you shouldn't really have to care. I have a blog post called setTimeout and friends that goes into more detail.

Lets say I have a queue that will take the server 1 minute to execute, and the first thing was some async function that finished after 10 seconds. Will it go to the end of the queue or will it push itself into the line the instant it is ready?

No JavaScript gets executed behind the scenes. All the JavaScript in your program runs front and center, one at a time. What happens behind the scenes is the OS handles IO and node waits for that to be ready and node manages its queue of javascript waiting to execute.

Now about "executing setTimeouts", when you invoke setTimeout, all node does is basically update a data structure of functions to be executed at a time in the future. It basically has a bunch of queues of stuff that needs doing and every "tick" of the event loop it selects one, removes it from the queue, and runs it.

So yes, you could totally block the event loop by just counting Fibonacci numbers synchronously all in memory all in the same tick, and yes that would totally freeze up your program. It's cooperative concurrency. Every tick of JavaScript must yield the event loop within some reasonable amount of time or the overall architecture fails.

There is a fixed set of functions in node core that are async because they make system calls and node knows which these are because they have to call the OS or C++. Basically all network and filesystem IO as well as child process interactions will be asynchronous and the ONLY way JavaScript can get node to run something asynchronously is by invoking one of the async functions provided by the node core library. Even if you are using an npm package that defines it's own API, in order to yield the event loop, eventually that npm package's code will call one of node core's async functions and that's when node knows the tick is complete and it can start the event loop algorithm again.

There's only 1 thread in the node process that will actually execute your program's JavaScript. However, within node itself, there are actually several threads handling operation of the event loop mechanism, and this includes a pool of IO threads and a handful of others. The key is the number of these threads does not correspond to the number of concurrent connections being handled like they would in a thread-per-connection concurrency model.

Yes, this is true, but it's misleading. The key thing is the normal pattern is:

Note
Rectangle 27 0

javascript Understanding the Event Loop?


//Let's say this code is running in tick 1
fs.readFile("/home/barney/colors.txt", function (error, data) {
  //The code inside this callback function will absolutely NOT run in tick 1
  //It will run in some tick >= 2
});
//This code will absolutely also run in tick 1
//HOWEVER, typically there's not much else to do here,
//so at some point soon after queueing up some async IO, this tick
//will have nothing useful to do so it will just end because the IO result
//is necessary before anything useful can be done

1: If we are talking about a single-threaded application, then what processes setTimeouts while JS engine accepts more requests and executes them? Isn't that single thread will continue working on other requests? Then who is going to keep working on setTimeout while other requests keep coming and get executed.

2: If these setTimeout will get executed behind the scenes while more requests are coming and in and being executed, the thing carry out the async executions behind the scenes is that the one we are talking about EventLoop?

3: How can JS Engine know if it is an async function so that it can put it in the EventLoop?

4 The Event Loop is a queue of callback functions. When an async function executes, the callback function is pushed into the queue. The JavaScript engine doesn't start processing the event loop until the code after an async function has executed.

@SheshPai it's too confusing for everyone to discuss code when written in paragraphs of English. Just post a new question with a code snippet so people can answer based on code instead of a description of code, which leaves a lot of ambiguity.

A key thing to understand is that node relies on the OS for most of the heavy lifting. So incoming network requests are actually tracked by the OS itself and when node is ready to handle one it just uses a system call to ask the OS for a network request with data ready to be processed. So much of the IO "work" node does is either "Hey OS, got a network connection with data ready to read?" or "Hey OS, any of my outstanding filesystem calls have data ready?". Based upon its internal algorithm and event loop engine design, node will select one "tick" of JavaScript to execute, run it, then repeat the process all over again. That's what is meant by the event loop. Node is basically at all times determining "what's the next little bit of JavaScript I should run?", then running it. This factors in which IO the OS has completed, and things that have been queued up in JavaScript via calls to setTimeout or process.nextTick.

Can you please elaborate? Let us say I have two callbacks and the first one has a changeColor method with execution time of 10mS and a setTimeout of 1 minute and the second has a changeBackground method with execution time of 50ms with a setTimeout of 10 seconds. I feel the changeBackground with be in the Queue first and the changeColor will be next. After that the Event loop picks the methods synchronously. Am I right?

Generally it will go to the end of the queue, but the semantics of process.nextTick vs setTimeout vs setImmediate are subtly different, although you shouldn't really have to care. I have a blog post called setTimeout and friends that goes into more detail.

Lets say I have a queue that will take the server 1 minute to execute, and the first thing was some async function that finished after 10 seconds. Will it go to the end of the queue or will it push itself into the line the instant it is ready?

No JavaScript gets executed behind the scenes. All the JavaScript in your program runs front and center, one at a time. What happens behind the scenes is the OS handles IO and node waits for that to be ready and node manages its queue of javascript waiting to execute.

Now about "executing setTimeouts", when you invoke setTimeout, all node does is basically update a data structure of functions to be executed at a time in the future. It basically has a bunch of queues of stuff that needs doing and every "tick" of the event loop it selects one, removes it from the queue, and runs it.

So yes, you could totally block the event loop by just counting Fibonacci numbers synchronously all in memory all in the same tick, and yes that would totally freeze up your program. It's cooperative concurrency. Every tick of JavaScript must yield the event loop within some reasonable amount of time or the overall architecture fails.

There is a fixed set of functions in node core that are async because they make system calls and node knows which these are because they have to call the OS or C++. Basically all network and filesystem IO as well as child process interactions will be asynchronous and the ONLY way JavaScript can get node to run something asynchronously is by invoking one of the async functions provided by the node core library. Even if you are using an npm package that defines it's own API, in order to yield the event loop, eventually that npm package's code will call one of node core's async functions and that's when node knows the tick is complete and it can start the event loop algorithm again.

There's only 1 thread in the node process that will actually execute your program's JavaScript. However, within node itself, there are actually several threads handling operation of the event loop mechanism, and this includes a pool of IO threads and a handful of others. The key is the number of these threads does not correspond to the number of concurrent connections being handled like they would in a thread-per-connection concurrency model.

Yes, this is true, but it's misleading. The key thing is the normal pattern is:

Note
Rectangle 27 0

javascript Understanding the Event Loop?


Here is the video link on Youtube.

A must watch video for JavaScript fans and enthusiasts.

I watched it and it was indeed the best explanation ever.

There is a fantastic video tutorial by Philip Roberts, which explains javascript event loop in the most simplistic and conceptual way. Every javascript developer should have a look.

came wandering here.. and this is one of the best explanation i got.. thank you for sharing...:D

Note
Rectangle 27 0

javascript Understanding the Event Loop?


Here is the video link on Youtube.

A must watch video for JavaScript fans and enthusiasts.

I watched it and it was indeed the best explanation ever.

There is a fantastic video tutorial by Philip Roberts, which explains javascript event loop in the most simplistic and conceptual way. Every javascript developer should have a look.

came wandering here.. and this is one of the best explanation i got.. thank you for sharing...:D

Note
Rectangle 27 0

javascript Understanding the Event Loop?


console.clear();                                   //exec sync
console.log("a");                                  //exec sync
setTimeout(                //schedule inAWhile to be executed at now +1 s 
    function inAWhile(){
        console.log("b");
    },1000);    
console.log("c");                                  //exec sync
setTimeout(
    function justNow(){          //schedule justNow to be executed just now
        console.log("d");
},0);

Don't think the host process to be single-threaded, they are not. What is single-threaded is the portion of the host process that execute your javascript code.

Except for background workers, but these complicate the scenario...

Here is my mental representation (beware: it's just that, I don't know the browser implementation details!) of your example code:

So, all your js code run in the same thread, and there's no possibility that you get two different portions of your js code to run concurrently (so, you get not concurrency nigthmare to manage).

The host process now try to match all events happened to see if there handlers registered for them. It found that the event that justNow is waiting for has happened, so it start to run its code. When justNow function exit, it check the event loop another time, searhcing for handlers on events. Supposing that 1 s has passed, it run the inAWhile function, and so on....

The js code that is executing is the last code that the host process picked up from the event loop. In your code you can basically do two things: run synchronous instructions, and schedule functions to be executed in future, when some events happens.

When your code completes, it is removed from the event loop, and the host process return to checking it, to see if there are more code to run. The event loop contains two event handler more: one to be executed now (the justNow function), and another within a second (the inAWhile function).

While your code is running, another thread in the host process keep track of all system events that are occurring (clicks on UI, files read, networks packets received etc.)

Note