Detailed introduction to setTimeout in JS function

This article mainly introduces the execution process of js function from setTimeout. Friends who need it can refer to it

To be honest, when I wrote this article, I felt a little depressed because I was hit. Why ? Just because I like to mess around, I accidentally saw this "simple" function:

for (var i = 0; i < 5; i++) {
      setTimeout(function () {
        console.log(i)
      }, i * 1000);
    }
    console.log(i);

What? Isn't this the implementation method I saw a long time ago of printing a 5, then a 5, and then printing a 5 every second until 6 5s are printed? So here comes the question, what should I do if I want to print 0,1,2,3,4,5 in sequence? In fact, I knew these two methods before: one is like this:

function log(i){
setTimeout(function(){
console.log(i)
},i*1000)
};
for (var i = 0; i < 5; i++) {
      log(i) ;
    }
    console.log(i);

Another one is like this:

for(var i=0;i<5;i++){
(function(e){
setTimeout(function(){
console.log(e)
},i*1000);
})(i);
};
console.log(i);

I’m not afraid of jokes. Before this, I didn’t understand what these two functions were really used for. I just forced myself to remember this and modify it. It's okay, but not now. I have obsessive-compulsive disorder! So, I slowly analyzed it and found that the above code can be separated into this: when

i=0; the condition is met;

setTimeout(function(){
console.log(i)
},0*1000)；

i=1; the condition is met;

setTimeout(function(){
console.log(i)
},1*1000)；

When i=2; the condition is met;

setTimeout(function(){
console.log(i)
},2*1000)；

When i=3; the condition is met;

setTimeout(function(){
console.log(i)
},3*1000)；

i=4; the condition is met;

setTimeout(function(){
console.log(i)
},4*1000);

When i=5, the condition is not met, jump out of the loop, and then execute console.log(i) after the for loop, printing 5; finally, print 5 every second;

It’s really interesting, why is the console in setTimeout. Will log be executed after console.log outside the for loop? Until I realized the word => "queue", queues are divided into macro task queues (Macro Task) and micro task queues (Micro Task). In javascript:

macro-task includes: script (Overall code), setTimeout, setInterval, setImmediate, I/O, UI rendering.

Micro-task includes: process.nextTick, Promises, Object.observe, MutationObserver

The setTimeout of the above function belongs to the macro task

In js, the order of the event loop The first loop starts from script, and then the global context enters the function call stack. When a macro-task is encountered, it is handed over to the module that handles it. After processing, the callback function is put into the queue of the macro-task. When a micro-task is encountered, -task also puts its callback function into the micro-task queue. Until the function call stack is cleared and only the global execution context is left, all micro-tasks start to be executed. After all executable micro-tasks have been executed. The loop executes a task queue in the macro-task again, and then executes all micro-tasks after execution, and the loop continues like this.

This is why the console.log inside setTimeout will be executed after the console.log outside the for loop. In the function execution context, the seiTimeout function will be placed in the queue to process its macro-task. , so the function in setTimeout will not be executed during the loop, but will wait until all the overall code (non-queue) is finished running before the function in the queue is executed; writing this, I may be a little confused, in fact, I also A little confused, hahaha! !

In order to deepen your understanding, you can also try adding Promise to it, so here is this:

(function copy() {
  setTimeout(function() {console.log(4)}, 0);
  new Promise(function executor(resolve) {
    console.log(1);
    for( var i=0 ; i<10000 ; i++ ) {
      i == 9999 && resolve();
    }
    console.log(2);
  }).then(function() {
    console.log(5);
  });
  console.log(3);
})()

Explain it=>

1. First, the script task source Executed first, the global context is pushed onto the stack.

2. When the script task source code encounters setTimeout during execution, as a macro-task, it puts its callback function into its own queue.

3. The code of the script task source encounters a Promise instance during execution. The first parameter in the Promise constructor is that the current task will not be put into the queue if it is executed directly, so 1 is output at this time.

4. When encountering the resolve function in the for loop, the function is pushed into the stack and then popped out. At this time, the status of Promise becomes Fulfilled. The code then executes and encounters console.log(2), which outputs 2.

5. Then execute, the code encounters the then method, and its callback function is pushed onto the stack as a micro-task and enters the task queue of Promise. At this time, the function callback function in then of Promise and the function in setTimeout The callback functions have the same meaning and will be placed in their respective task queues.

They will not be executed until the function context, that is, all non-queue code in the script, has been executed. Moreover, the microtask queue has priority over the macrotask queue. Processing,

The overall sequence is: context non-queue code > microtask queue callback function code > macrotask queue callback function code

6. The code is then executed, and console is encountered at this time. log(3), output 3.

7. After output 3, the code of the first macrotask script is executed, and all micro-tasks in the queue begin to be executed. The then callback function is pushed onto the stack and then popped out. At this time, 5

8 is output. At this time, all micro-tasks are completed and the first cycle ends. The second round of loop starts from the task queue of setTimeout. The callback function of setTimeout is pushed into the stack and then popped out. At this time, 4 is output.

Finally, in order to deepen understanding, here is another piece of code:

console.log('golb1');
setTimeout(function() {
  console.log('timeout1');
  new Promise(function(resolve) {
    console.log('timeout1_promise');
    resolve();
　　　　setTimeout(function(){
　　　　　　console.log('time_timeout')
　　　　});　　
  }).then(function() {
    console.log('timeout1_then')
  })
  setTimeout(function() {
   console.log('timeout1_timeout1');
  });
})
new Promise(function(resolve) {
  console.log('glob1_promise');
  resolve();
　　setTimeout(function(){
　　　　　console.log('prp_timeout')
　　　　});
}).then(function() { console.log('glob1_then') })

If your execution result is: golb1=>glob1_promise=>glob1_then=>timeout1=>timeout1_promise=> ;timeout1_then=>prp_timeout=>time_timeout=>timeout1_timeout1,

Maybe asynchronous queue is an introduction! ~~The above code looks a bit messy. It may be better to use asyns and await to transform it, but this is more or less the insight I got from setTimeout.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the WeChat Jump Game using Three.js

Detailed introduction to http implementation in NODEJS

How to implement chat function using nodejs

How to use advanced functions in JavaScript

Using Angular5 Implementing server-side rendering practice

How to implement idle state reset in vuex

The above is the detailed content of Detailed introduction to setTimeout in JS function. For more information, please follow other related articles on the PHP Chinese website!