Preface: In order to enrich yourself in your spare time, not only do you write about the business processes you use to go to work every day, but as a novice who has just stepped into the front-end industry, you need to make good use of the fragmented time for self-education. Because I mainly use vue, I am curious about several commonly used delayed call methods (promise, setTimeout, and nextTick). What will happen when they are executed at the same time.
First look at the definition of promise, setTimeout and nextTick in the document:
promise
Promise is a solution to asynchronous programming that was first proposed and implemented by the community. It is more reasonable and powerful than other traditional solutions (callback functions and events).
ES6 has written it into the language standard, unified usage, and natively provides Promise objects.
ES6 stipulates that the Promise object is a constructor to generate Promise instances.
setTimeout
JavaScript provides the function of timing code execution, called timer (timer), which is mainly completed by the two functions of setTimeout() and setInterval(). They add timed tasks to the task queue. People who first came into contact with it thought it was so simple. Is it true in real time? Here is a record of the process of using posture changes along the way.
nextTick
The DOM operations performed by the created() hook function of the Vue life cycle must be placed in the callback function of Vue.nextTick(). When the created() hook function is executed, the DOM does not actually perform any rendering, and DOM is performed at this time Operation is in vain, so the JS code of DOM operation must be put into the callback function of Vue.nextTick() here. Corresponding to it is the mounted() hook function, because all DOM mounting and rendering have been completed when the hook function is executed, and there is no problem with any DOM operations in the hook function at this time.
It is not difficult to see that these three methods can all be delayed to call some methods to make their own business logic go more smoothly, but when we call these three methods at the same time, what is their order of execution?
console.log('1.我是console');
setTimeout(function() {
console.log('2.我是第一个setTimeout的console');
process.nextTick(function() {
console.log('3.我是第一个setTimeout内层nextTick的console');
})
new Promise(function(resolve) {
console.log('4.我是第一个setTimeout内层Promise的console');
resolve();
}).then(function() {
console.log('5.我是第一个setTimeout内层Promise.then的console')
})
})
process.nextTick(function() {
console.log('6.我是nextTick的console');
})
new Promise(function(resolve) {
console.log('7.我是Promise的console');
resolve();
}).then(function() {
console.log('8.我是Promise.then的console')
})
setTimeout(function() {
console.log('9.我是第二个setTimeout的console');
process.nextTick(function() {
console.log('10.我是第二个setTimeout内层nextTick的console');
})
new Promise(function(resolve) {
console.log('11.我是第二个setTimeout内层Promise的console');
resolve();
}).then(function() {
console.log('12.我是第二个setTimeout内层Promise.then的console')
})
})
Output:
1. I am the console
7. I am the Promise console
6. I am the nextTick console
8. I am the Promise.then console
2. I am the first setTimeout console
4. I am the first setTimeout inner layer Promise console
3. I am the console of the first setTimeout inner layer nextTick
5. I am the console of the first setTimeout inner Promise.then
9. I am the second setTimeout console
11. I am the second setTimeout The console of the layer Promise
10. I am the console of the second setTimeout inner layer nextTick
12. I am the console of the second setTimeout inner layer Promise.then
At this time, I went to look at the explanation of macro tasks and micro tasks, and then re-understood this execution sequence
macro-task (macro task): including the overall code script, setTimeout, setInterval
micro-task (micro-task): Promise, process.nextTick
process.nextTick: process.nextTick(callback) is similar to the node.js version of "setTimeout", the callback function is called in the next loop of the event loop.
JavaScript is a single-threaded
setTimeout: because it needs to enter the micro task queue, even if it is 0, it takes 4ms at the fastest, and it has to wait for it to leave the queue.