Problems with the execution order of promise and setTimeout in JavaScript (code example)

The content of this article is about the execution order of promise and setTimeout in JavaScript (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Promise is a language standard introduced by es6 and is a solution for asynchronous programming;

The prerequisite for reading this article is to understand the mechanism of the browser event loop, as well as the basic usage of promise and Features, such as its self-execution feature, state irreversible feature, etc.

Throws a problem

Let’s look at the following code and questions

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve){
    console.log(2)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(3)
}).then(function(){
    console.log(4)
});
console.log(5);
// 这的问题是，为什么答案是 2 3 5 4 1
// 而不是 2 3 5 1 4

Since promise.then and setTimeout are both asynchronous , then the event of promise.then should be ranked behind setTimeout in the event loop queue, so why is promise.then printed before setTimeout?

Important concepts

The concept of event loop

• Javascript is single-threaded, and all synchronization tasks will be executed in the main thread.

• When all the tasks in the main thread are executed, the system will "sequentially" read the events in the task queue. The corresponding asynchronous task enters the main thread and begins execution.

• There will be differences between asynchronous tasks, so their execution priorities will also be different. They are roughly divided into micro tasks (micro tasks, such as Promise, MutaionObserver, etc.) and macro tasks (macro tasks, such as setTimeout, setInterval, I/O, etc.).

• The code in the Promise executor will be called synchronously, but the callback is based on microtasks.

• Macro tasks have a higher priority than micro tasks

• The current micro task queue must be cleared after each macro task is executed

• The code of the first script tag is the first macro task

• The main thread will continue to repeat the above steps until all tasks are executed.

My understanding

Let’s walk through the execution process of the code.

All codes are written in script tags, so read all The code is the first macro task, and we start executing the first macro task.

We first encounter setTimeout, which is the second macrotask. We throw it into the macrotask event queue and queue it first.

When we encounter a promise, the code in the promise executor will be called synchronously, so we print out 2 and 3 in sequence.

When you encounter the callback of promise, it is a microtask, and throw it into the microtask event queue.

Next, we print out 5, then execute the microtask and print out 4.

After our first macro task is executed, we execute the next macro task and print out 1. At this point, All tasks are performed.

So our final result is 2 3 5 4 1.

The above is the detailed content of Problems with the execution order of promise and setTimeout in JavaScript (code example). For more information, please follow other related articles on the PHP Chinese website!