How to operate the order of code execution in JS

This time I will show you how to operate the order of code execution in JS, and what are the precautions for the order of JS operation code execution. The following is a practical case, let's take a look.

1. js--->Single thread

 Strictly speaking, javascript does not have the concept of multiple threads. All programs are executed sequentially by a single thread.

 1. What is single thread?

To put it more simply, when the code is being executed, if another piece of code wants to be executed, it must wait until the execution of the current code is completed. Let’s take a piece of code to explain it

 for(var i=1;i<=3;i++){
   setTimeout(function(){
     console.log(i); //输出：4,4,4
   },0)
 }

Let’s take a look at the above code. Since the delay time is set to 0, the loop should be executed once and an i should be printed immediately, but the final print result is: 4, 4, 4. The reason why the above results occur is precisely because the js code is a single-threaded application.

 During the execution process, the for loop is encountered first, and the for loop enters the thread first. When i=1, after the loop reaches setTimeOut, the for loop has not yet completed execution, and setTimeOut will be put into a place (thread pool) to wait for execution. At this time, the for loop continues to execute. When i=2, the for loop has not yet finished executing. At this time, setTimeOut will still be placed in the thread pool waiting for execution... and so on, until the for loop completes 3 times, the for loop After the execution is completed, the thread is idle at this time. The setTimeOut waiting for execution in the thread pool executes and prints i in sequence. After the for loop execution is completed, i becomes 4, so three 4s are printed.

  2. If you want to change the above situation, you can use the following code

//将var变为let
for(let i=1; i<=3; i++){
  setTimeOut(function(){
    console.log(i); //输出的结果为1，2，3
  },0);
}
//用自执行函数进行包裹
for(var i=1; i<=3; i++){
  !function(i){
    setTimeOut(function(){
      console.log(i); //输出的结果为1，2，3
    },0);
  }(i)
}

2. Function scope in js and code execution

  >>>Function scope

Let’s first understand the following concepts:

　　1. In js language, there is no block-level scope similar to c language.

  2. The top-level scope in the js language is within the window object scope, which is called the global scope. Variables declared in the global scope are global variables.

  3. Variables within the scope of a js function can only be used inside the function and cannot be used outside the function. Such variables are local variables.

　　4. JS functions can be nested. The nesting of multiple functions constitutes the layer-by-layer nesting of scopes. This is called the scope chain in JS.

 5. JS scope chain variable access rules:

(1) When the variable to be accessed exists in the current scope, the variable in the current scope is used.

      (2) When the variable to be accessed does not exist in the current scope, it will be searched in the upper level scope until the global scope.

  >>>Execution order

  JS code execution is divided into two parts:

 1. Code checking and loading phase (precompilation phase). In this phase, variables and functions are declared, but variables are not assigned values. The default value of variables is undefined.

  2. The execution phase of the code. In this phase, variables are assigned values ​​and functions are declared.

After looking at some of the specific concepts above, let’s take a piece of code to illustrate:

var a=1; //声明了一个全局变量
function func(){
  console.log(a); //输出：undefined。打印a，而在func这个作用域中已经声明了a变量，按照js的执行顺序，此时的a并未被赋值。
  var a=1;
  console.log(a); //输出：1。
}
func();

 Look at the code above: the first a outputs undefined. Reason: According to the access rules of js scope chain, the variable a to be accessed exists in the current scope, so the variable in the current scope is used. According to the execution order of the js code, a at this time is only declared but not assigned. The default is undefined, so undefined is output.

The second a outputs 1. It is precisely because a has been declared and assigned a value at this time, so a outputs 1.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Technical Answers to Building a Book Management Platform with vue.js

Summary of commonly used instructions in vue.js

Detailed explanation of disabling and enabling JS buttons

The above is the detailed content of How to operate the order of code execution in JS. For more information, please follow other related articles on the PHP Chinese website!