Ask a js question.
I saw it on a website. I read the whole article, but I still don"t know how the result came out. It"s really good. I"ve come to ask you how to get it. (please be more detailed. It"s stupid. )
console.log(1);
new Promise(function (resolve, reject){
reject(true);
window.setTimeout(function (){
resolve(false);
}, 0);
}).then(function(){
console.log(2);
}, function(){
console.log(3);
});
console.log(4);
by the way, help the author with the advertisement. The original link of the article: Link description
answer: 1 4 3
process:
- first, the whole js is executed from top to bottom, and 1 is output when console.log (1) is encountered.
- encountered new Promise (function (resolve,reject) {}). Continuing to look inside, I came across reject (true). At this point, the state of promise has changed from pending to rejected . Further down, an operation within a setTimeout,setTimeout method will be thrown into the queue of the next macro task, even if the time is 0.
- finished function internal look. Then (). The internal operations of .then () will be thrown into the micro-task queue for execution.
- continue to look down and encounter console.log (4) output 4
- at this point, the macro task is finished, and the micro task is started. There is a. Then (),. Then () method in the micro-task queue that accepts two callback functions as parameters. The first callback function is called when the state of the Promise object changes to resolved, and the second callback function is called when the state of the Promise object changes to rejected. The second function is optional. At this time, the status of the promise is rejected , so the second function () {}, that is, console.log (3), is taken, so 3
is output.
The - micro task queue is also finished and starts to execute the next round of macro tasks, that is, operations within the setTimeout, but the resolve (false) at this time cannot change the state of the promise, because once the state of the promise is changed, it will remain in this state all the time .
this refers to microtasks and the unique state of Promise (once determined, it cannot be changed)
first execute console.log (1);
then enter Promise and execute reject (true) . At this time, the callback corresponding to reject is sent to the microtask, and the status of Promise is determined (reject)
finds setTimeout ,
jumps out of Promise , executes console.log (4),
executes stack , checks the micro task queue, and executes console.log (3).
at this time, the micro-task queue is empty. It is found that there are tasks in the asynchronous queue that can be triggered. Execute setTimeout internal resolve (false); , but the state of Promise is unique, so it is ignored.
the bosses above explained that the analysis was very specific.
what you need to understand is the state characteristics of js's eventloop and promise.
eventloop is mainly each taskqueue task queue, timer has timer task queue, promise has promise micro task queue.
just understand the above sentence.
it is true that queues are detected in each loop, but the implementation of js in different environments, such as chrome and node, varies.
the result of the above example is the same in node and chrome. But when I looked at this knowledge point at that time, I wrote the following example.
console.log(1);
new Promise(function (resolve, reject){
reject(true);
window.setTimeout(function (){
resolve(false);
}, 0);
}).then(function(){
console.log(2);
}).catch(function(){
console.log(3);
});
console.log(4);
what the bosses said was quite right. They didn't understand it at first, but it would be easy to understand it in this form. In fact, they carried out catch ()
.
