Examples to explain setTimeout to see the js function execution process

The setTimeout method is used to call a function or calculated expression after a specified number of milliseconds. This article mainly introduces the execution process of js function from setTimeout. Friends who need it can refer to it. I hope it can help everyone.

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 there are two methods before this: 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);

There is another one 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. I didn’t understand the true meaning of these two functions before. What is it used for? I just force myself to remember and modify it like this. But it doesn’t work now. I have obsessive-compulsive disorder! So, I slowly analyzed it and found that the above code can be separated into this:

i=0; when the conditions are met;

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

i =1; when the condition is met;

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

i=2; when the condition is met;

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

i=3 When; when the conditions are met;

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

i=4; when the conditions are met; when

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

i=5, If the conditions are not met, jump out of the loop, then execute console.log(i) after the for loop, and print 5; finally, print 5 every second;

It’s really interesting, why console.log in setTimeout is after What about console.log execution 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 is executed first, and 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 when 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 then all micro-tasks in the queue begin to be executed. Then the 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 round of loop 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') })

如果你的执行结果是:golb1=>glob1_promise=>glob1_then=>timeout1=>timeout1_promise=>timeout1_then=>prp_timeout=>time_timeout=>timeout1_timeout1,

可能异步队列算是入门了吧！~~上面的代码看起来有点杂乱，可能用asyns搭配await改造一下会更好，但是这或多或少是鄙人从setTimeout中得到的见解吧

相关推荐：

JavaScript中setTimeout()的使用详解

js中的setTimeout()函数

JavaScript如何使用setTimeout来实现轮循动画的实例详解

The above is the detailed content of Examples to explain setTimeout to see the js function execution process. For more information, please follow other related articles on the PHP Chinese website!