How is execution queue generated in JavaScript?

Question

Consider this simple example:

console.log('Start');

setTimeout(function() {
  console.log('First timeout');
}, 100);

setTimeout(function () {
  console.log('Second timeout');
}, 2000);

var time = Date.now();
for (var i = 0; i < 2000000000; i++) {
  var temp = i * i * Math.sqrt(i);
  temp = temp + temp;
}
console.log(Date.now() - time);

setTimeout(function () {
  console.log('Third timeout');
}, 50);

console.log('End');

The output is:

Start
1219
End
First timeout
Third timeout
Second timeout

What makes me think of the way the execution queue (stack?) is generated. Am I right that JavaScript intepreter checks the code first, generates the queue, and then starts the execution, adding functions from timeouts to the end of the queue when timeout time passes (so we have pregenerated execution queue which updates during the execution and dynamically generated timeout list)?

What's the exact reason for this question? Did you expect to see a different order in the log? — kbd
– kbd, Commented Dec 8, 2015 at 13:52
Much of what you're asking about is implementation dependent - each JavaScript engine may do things in it's own way. The JavaScript specification (and HTML specification, that's where setTimeout is defined) lists what steps / actions should be taken, but the engine can do it in whatever way it chooses. — James Thorpe
– James Thorpe, Commented Dec 8, 2015 at 13:52
@Spikee I try to make the concept clear for myself to understand it in future and to be able to explain this at, for instance, job interview. — Georgy
– Georgy, Commented Dec 8, 2015 at 13:56
@JamesThorpe Are there any production engines that handle this differently? — Georgy
– Georgy, Commented Dec 8, 2015 at 13:58
No idea - my interest stops at the spec - that defines how things behave at the level I'm interested in. Similarly, I haven't looked to see how the CLR or Mono implement the CLI either... — James Thorpe
– James Thorpe, Commented Dec 8, 2015 at 14:01

Lavi Avigdor · Accepted Answer · 2015-12-08 13:56:18Z

2

JavaScript is single-threaded. The timeout calls are pushed to the event loop, thus they are executed after all the main flow calls.

console.log('Start');  **-> Printed #1 **

setTimeout(function() {
  console.log('First timeout');    **-> Pushed to eventloop #1 **
}, 100);

setTimeout(function () {
  console.log('Second timeout');**-> Pushed to eventloop  #3 !! **
}, 2000);

var time = Date.now();
for (var i = 0; i < 2000000000; i++) {
  var temp = i * i * Math.sqrt(i);
  temp = temp + temp;
}
console.log(Date.now() - time); **-> Printed #2 **

setTimeout(function () {
  console.log('Third timeout');  **-> Pushed to eventloop #2 !!**
}, 50);

console.log('End'); **-> Printed #3 **

Note: "Third timeout" was pushed to the event loop #2 instead of #1 even thougt it has a 50ms vs 100ms (of first) since it was processed after you lengthy for loop, which took enough time for the first's timeout to be reached.

EventLoop explained: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

answered Dec 8, 2015 at 13:56

Lavi Avigdor

4,1823 gold badges28 silver badges28 bronze badges

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

1 Comment

Georgy Over a year ago

Thanks! Looks like I was on the right path. For every event js adds it to "event loop" and invokes the corresponding code. So the example would be way more interesting with nested timeouts, xhrs and clicks. blog.carbonfive.com/2013/10/27/… was extremely was really helpful as an additional information to your answer.

Collectives™ on Stack Overflow

How is execution queue generated in JavaScript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related