Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between "event loop queue" and "job queue"?

I can not understand how the following code run. Why "1" is after "b" but "h" is after "3"? Should'n the order be: a, b, 1, 2, h, 3? Some articles said that the difference between "event loop queue" and "job queue" leads to the following output. But how? I have read the specification of ECMAScript 2015 - 8.4 Jobs and Job Queues, wanting to know how Promise'job works, but it makes me more confused. Can someone help me? Thank you!

var promise = new Promise(function(resolve, reject) {resolve(1)}); promise.then(function(resolve) {console.log(1)}); console.log('a'); promise.then(function(resolve) {console.log(2);}); setTimeout(function() {console.log('h')}, 0); promise.then(function(resolve) {console.log(3)}); console.log('b');  // a // b // 1 // 2 // 3 // h 

I know Promise is asynchronous, but the callback of setTimeout(..) asynchronous operation is always after Promise's asynchronous operation. Why?

like image 364
Sam Yang Avatar asked Nov 30 '16 04:11

Sam Yang


People also ask

What is event loop queue?

Queue. A JavaScript runtime uses a message queue, which is a list of messages to be processed. Each message has an associated function that gets called to handle the message. At some point during the event loop, the runtime starts handling the messages on the queue, starting with the oldest one.

What is event loop what is the difference between call stack and task queue?

Event Loop has pretty specific work. It has responsibility to see weather the call-stack is empty and does the task queue contains pending task to process. If the call-stack is empty, it will push the task to the call-stack from the queue and the task gets processed.

What is job queue in JS?

Job Queue. ES6 introduced the concept of the Job Queue, which is used by Promises (also introduced in ES6). It's a way to execute the result of an async function as soon as possible, rather than being put at the end of the call stack.

What is an event loop and callback queue and microtask queue?

Microtask Queue gets the callback functions coming through Promises and Mutation Observer. Callback Queue has lesser priority than Microtask Queue of fetching the callback functions to Event Loop. Microtask Queue has higher priority than Callback Queue of fetching the callback functions to Event Loop.


1 Answers

Why "1" is after "b"?

By promise specification, all promise .then() handlers are called asynchronously AFTER the current thread of JS has run to completion. Thus, both a and b which are executed synchronously as part of the current JS will execute before any .then() handlers so 1 will always be after a and b.

Some interesting reading: Tasks, microtasks, queues and schedules and What is the order of execution in javascript promises and Writing a JavaScript framework - Execution timing, beyond setTimeout.


There's some good advice here in this thread:Promises wiggle their way between nextTick and setImmediate:

I would not recommend relying on the exact execution order of non-chained events. If you want to control the execution order — rearrange the callbacks in a way so that the one that you want to be executed later depends on the one that you want to be executed earlier, or implement a queue (that does the same behind the hood).

In other words, if you depend upon a particular timing of asynchronous events, then you should actually chain them in your code so one must happen after the other via your code rather than relying on unspecified scheduling in the implementation.

like image 74
jfriend00 Avatar answered Oct 18 '22 21:10

jfriend00