console.log('script start') async function async1() { await async2() console.log('async1 end') } async function async2() { console.log('async2 end') } async1() setTimeout(function() { console.log('setTimeout') }, 0) new Promise(resolve => { console.log('Promise') resolve() }) .then(function() { console.log('promise1') }) .then(function() { console.log('promise2') }) console.log('script end')
Execution results?
analysis:
Execute synchronization code first:
1. First console.log('script start') 2. When async1() is executed, the async2 function is executed immediately: console.log('async2 end') 3. Execute the synchronization function in new Promise() in sequence: console.log('Promise') 4. Final execution console.log('script end'). The above is the code of synchronous execution, and then look at the remaining code of asynchronous execution: First of all, setTimeout is a macro task. Until the end, there are micro tasks left:async function async1() { await async2() console.log('async1 end') } new Promise(resolve => { resolve() }) .then(function() { console.log('promise1') }) .then(function() { console.log('promise2') })
5. Then, according to the first in, first out alignment, execute the function blocked after await async2() console.log('async1 end')
6. Execute the resolve function of promise
new Promise(resolve => { resolve() })
The next two then: console.log('promise1') ---- console.log('promise2') ；
7. The last executed function is setTimeout console.log('setTimeout') ；
To sum up, the above codes are executed in the following order:
1.script start 2.async2 end 3.Promise 4.script end 5.async1 end 6.promise1 7.promise2 8.setTimeout
Topic 2:
(function() { setTimeout(() => { console.log(0); }); new Promise(resolve => { console.log(1); setTimeout(() => { resolve(); Promise.resolve().then(() => console.log(2)); console.log(3); }); Promise.resolve().then(() => console.log(4)); }).then(() => { console.log(5); Promise.resolve().then(() => console.log(8)); setTimeout(() => console.log(6)); }); console.log(7); })();
1. Execute synchronization code first, and remove setTimeout first:
new Promise(resolve => { console.log(1); Promise.resolve().then(() => console.log(4)); //Micro task }).then(() => { //The then function is executed when the corresponding resolve is executed console.log(5); Promise.resolve().then(() => console.log(8));//Micro task
}); console.log(7);
As you can see, execute first: console.log(1);console.log(7);
2. Perform micro tasks Promise.resolve ().then(() => console.log (4));
The code becomes:
(function() { setTimeout(() => { console.log(0); }); new Promise(resolve => { setTimeout(() => { resolve(); Promise.resolve().then(() => console.log(2)); console.log(3); }); }).then(() => { console.log(5); Promise.resolve().then(() => console.log(8)); //This sentence is extra setTimeout(() => console.log(6)); }); })();
Only macro tasks are left (micro tasks are in macro tasks, that is, there are no micro tasks outside macro tasks)
3. Execution console.log(0);
4. Execute setTimeout in new Promise and the synchronization function in it first: console.log(3)
5. Execute the above resolve, which corresponds to the following then function:
then(() => { console.log(5); Promise.resolve().then(() => console.log(8)); //This sentence is extra setTimeout(() => console.log(6)); }
So first console.log(5);
The rest are micro tasks and macro tasks. First, look at micro tasks:
new Promise(resolve => { resolve(); Promise.resolve().then(() => console.log(2)); }).then(() => { Promise.resolve().then(() => console.log(8)); setTimeout(() => console.log(6)); });
Therefore, the micro tasks in the queue are executed first: console.log(2) , in the execution of the console.log(8)；
Last but not least console.log(6)
In conclusion, the result is
1/7/4/0/3/5/2/8/6 Detailed question 3:(function() { setTimeout(() => { console.log(0); }); new Promise(resolve => { console.log(1); setTimeout(() => { resolve(); Promise.resolve().then(() => { console.log(2); setTimeout(() => console.log(3)); Promise.resolve().then(() => console.log(4)); }); }); Promise.resolve().then(() => console.log(5)); }).then(() => { console.log(6); Promise.resolve().then(() => console.log(7)); setTimeout(() => console.log(8)); }); console.log(9); })();The explanation is as follows: [synchronous > asynchronous; micro task > macro task] Step 1: print out 1. 9. As shown in the figure
Figure a
According to the task queue in Figure a:
Step 2: execute micro task 3, print out 5;
Step 3: execute macro task 1, print out 0,
Step 4: start macro task 2, as shown:
Figure b
Step 5: according to the task queue in Figure b, execute micro task 4 and print out 6, as shown in the figure:
Figure c
Step 6: according to the task queue in Figure c, execute micro task 5 and print out 2, as shown in Figure c
Figure d
From the task queue in Figure d,
Step 7: execute micro task 6, print out 7;
Step 8: execute micro task 9, print out 4;
Step 9: execute macro task 7 and print out 8;
Step 10: execute macro task 8 and print out 3;
The answer is:
1-9-5-0-6-2-7-4-8-3