Check the timing of the execution of JS functions

Let’s start with a piece of code

Learning JavaScript is often a bit confusing

How did that happen? 😲
How does that work? 🤔
JS garbage!!!!!! 😀

But still have to use JavaScript to eat is not, the skull again pain also have good reason (TU) solution (CAO) JS principle!

Let’s start with a fairly ordinary piece of JavaScript code that tries to print a few numbers in a loop on the console.

let i = 0
for(i = 0; i<6; i++){
  console.log(i)
}
Copy the code

Run it in Chrome and the result is as follows:

If you’re new to JS, you know that the result is 6 numbers from 0 to 5.

Something amazing happened

Now let’s spice up the code. We’ll still use the same loop to output the numbers, except that theconsole.logThe statement is placedsetTimeoutFunction and set the delay to 0, and see what the console outputs.

let i = 0
for(i = 0; i<6; i++){
  setTimeout(() = >{
    // Delay function
    console.log(i)
  },0)}Copy the code

In Chrome, the result is as follows:

As you can see, the Chrome browser runs and prints six sixes on the console

What the hell?

How does this work? Magic JS knowledge to increase again?

Let’s start with the setTimeout function

What does the setTimeout() function do?

Query MDN and you can see that the description given in the documentation is:

setTimeout()Method to set aThe timer, which executes a function or a specified piece of code after the timer expires.

Go to W3School, and the description they give is as follows:

The setTimeout() method is used to call a function or evaluate an expression after a specified number of milliseconds

That sounds a little easier to understand, and it might be easier to understand if you look at the code examples

/* The browser will say hello to you in 3 seconds! * /
setTimeout(
  function(){
    alert("Hello"); 
  }, 3000); Copy the codeCopy the code

For the setTimeout() function, more colloquially:

Everything you put in this function will be done later, and how much later can be adjusted by setting the number of milliseconds.

What if I set the delay to zero?

For 0s ===, the delay is no longer for a long time but for ** immediately, but how much “immediately”? Just how “immediately” is “immediately”?
To try to understand “Now now,” you need to introduce some concepts of Event Loop.

What happens when we use setTimeout()?

The following part of the information is basically from the following video, I suggest you watch this video, it is a great! (Ichiban! What is an event loop? -Philip Roberts (Video review underway)

Next we’ll look at what happens when setTimeout() is used.

What exactly does setTimeout() do?

We use a diagram to illustrate what happens when setTimeout() is called. Don’t look at the picture, look down at the text first.

! [image-20210501113639783](.. /.. /.. /Library/Application Support/typora-user-images/image-20210501113639783.png)

A brief explanation of some terminology

You can skip this part, of course, but it doesn’t hurt to see.

Call Stack

MDN’s interpretation of the call stack looks something like this:

Whenever we call a function, the function is added to the call stack and execution begins

A function that is executing in the call stack will also be placed on the call stack if it calls another function

When the function in the call stack completes, it is cleared from the call stack

The function to be executed pushes to the top of the stack, and pops out of the top of the stack, last in first out.

For more information on the call stack, refer to JS errors and call stack lore that you don’t know about

Timer

Timers can be understood as: the periodic execution of a piece of code, heresetTimeout()The function is a timer that JS provides for us.

For more information about timers, see the JavaScript standard Reference tutorial, Timers

Web APIs

Web APIs are threads created by browsers, timers and so on.

Callback Queue

An ordered sequence containing callback functions.

A simple description of Event loops

The event loop consists of the following steps:
- The function is pushed into the stack, and when it reaches the timer (such an asynchronous task), it is left to the Web APIs to execute, and the remaining tasks in the stack (synchronous tasks) continue until the stack is empty.
- During this time, the Web APIs will execute the timer until it runs out, and then throw the callback function (the first argument to setTimeout) into the callback sequence;
- When the call stack is empty, the event loop puts a task in the Callback onto the stack and executes it, returning to the first step.

Now that you’ve seen so many concepts, you may be confused, but don’t worry, let’s go through the loop of events with pictures, and then come back and look at the definitions.

Illustration of setTimeout execution

So this is the same code, but let’s visualize it a little bit.

let i = 0
for(i = 0; i<6; i++){
  setTimeout(() = >{
    console.log(i)
  },0)}Copy the code

First we define variablesiAnd assign a value to it. The main program begins.

And then we go into the loop, and the first step of the loop isjudgei<6Whether there is, need to put the judgmenti<6The statement is placed in the call stack for execution.

In this case, the value of I is 0, I <6 is obviously true, and the code in the loop body will continue to execute, namely setTimeout(), i.e., push the stack.

As a timer,setTimeout()Will be thrown into the Web APIs for execution.

At this point, the call stack will continue to execute the following code because the loop has completed, so it will judge I <6 again and enter the next loop.

Almost at the same moment (0s), the timer finishes and the callback function is thrown into the callback sequence.

Note that the task in the callback sequence is not executed immediately, but will wait until the stack is empty to start the stack execution, so it will continue the main program. SetTimeout () in the loop body, because it is a timer, is thrown into the Web APIs to execute.

Almost at the same moment (0s), the timer finishes and the callback function is thrown into the callback sequence.

The loop repeats until the value of I is 6, and the loop is complete and the main program ends.

At this point, the tasks in the callback sequence are still stacked and printediThe value ofiIs 6, so a 6 is printed out on the console.

The tasks in the callback sequence are stacked one by one until the last callback functionconsole.log()Print six 6’s in a row.

At this point, we’ve basically explained why the code at the beginning of this article prints six sixes instead of zero to five.

If, I want to output “0~5”!

We’ve explained why that code prints six sixes, but what if I want to print 0 to 5 with a nested setTimeout() in the for loop?

Plan a

Declare it in the for bodyi.

for(let i = 0; i<6; i++){
  setTimeout(() = > {
  	console.log(i)
  }, 0)}Copy the code

Scheme 2

So let’s declare the functionsetTimeout()In the call.

let i = 0
function cb() {
  console.log(i)
}
for(i = 0; i<6; i++){
  setTimeout(cb(), 0)}Copy the code

Plan 3

Use immediate execution functions?

let i = 0
for(i = 0; i<6; i++){
  (function(i){
  	setTimeout(() = > {
  		console.log(i)
  	}, 0)
  })(i)
}
Copy the code

Plan 4

for(var i = 1; i <= 5; i++) {
  setTimeout(console.log.bind(console, i), i * 1000);
}
Copy the code

The essence of each of these scenarios is to limit I to every Function instance created in the loop, either through closures or the block scope of the let, as well as function.proptotype.bind ().

Refenences

Timing of JavaScript function execution – awkward flow

Browser event loop mechanism – Kite Runner er

How to serialize concurrent operations in JavaScript: callbacks, promises, and asynchronous waits – itclanCoder

Javascript for loop wrapped around asynchronous functions – microkof

Detailed explanation of JavaScript operation mechanism: Again talk about Event Loop – Ruan Yifeng

What the heck is the Event Loop anyway? – Philip Roberts

【 speech 】In the loop – Jake Archibald