The execution timing of the JS function

JS functions run at different times, there will be different results of the operation of this article will be analyzed respectively by examples

Case a

let a = 1
function fn(){
    console.log(a)
}
Copy the code

Nothing is printed here because the function is declared but not executed

Case 2

let a = 1
function fn(){
    console.log(a)
}
fn() / / 1

Copy the code

I’m going to print a, because I declared a at the beginning, and a has a value of 1, and then I’m going to call fn and print a.

Case 3

let a = 1
function fn(){
    console.log(a)
}
a = 2
fn() / / 2
Copy the code

2 is printed here because a was assigned 2 before fn() was called

Summary:

As you can see from the example above, we need to be careful when calling a function to see if the value of the variable is the one we want

The Case for asynchrony

Case a

let a = 1
function fn(){
    setTimeout(() = >{
        console.log(a)
    },0)
}
fn() / / 2
a = 2
Copy the code

Let a= 1, fn(), a=2, and then execute console.log(a) so print out a as 2

Case 2

for(var i = 0; i<6; i++){
    setTimeout(() = >{
        console.log(i)
    },0)}// Six sixes will be printed
Copy the code

This code will print out six 6’s. The idea is that setTimeout will wait until the for loop of the current code is finished before executing console.log(I). By the time the for loop is finished, I is already 6, so it will print out six 6’s

A popular understanding of setitmeout

You’re playing a game, you have the last level left, and your mother asks you to go to dinner, and you say you’re going to go to dinner right away (corresponding to setTimeout(function, 0)), but you’re actually going to finish the game before you go to dinner.

Case 3

If you want to be able to print 0,1,2,3,4,5 in sequence when you use settimeout in a for loop, what do you do?

for(let i = 0; i<6; i++){
    setTimeout(() = >{
        console.log(i)
    },0)}// 0 1 2 3 4 5
Copy the code

Just use a Let, which creates a single scope equivalent to six I’s, equivalent to the following code

(let i = 0) {
    setTimeout(() = >{
        console.log(i)
    },0)} (let i = 1) {
    setTimeout(() = >{
        console.log(i)
    },0)} (let i = 2) {
    setTimeout(() = >{
        console.log(i)
    },0)}; (let i = 3) {
    setTimeout(() = >{
        console.log(i)
    },0)} (let i = 4) {
    setTimeout(() = >{
        console.log(i)
    },0)} (let i = 5) {
    setTimeout(() = >{
        console.log(i)
    },0)};Copy the code

Four cases

Instead of using Let, you can solve this problem by saving I every time

for (var i = 0; i < 6; i++) {
    setTimeout((function(i){
        return function() {
            console.log(i);
        }
    }(i)),0)}// 0 1 2 3 4 5
Copy the code

A case of nesting dolls

function f1(){
    let a = 1
    function f2(){
        let a = 2
        function f3(){
            console.log(a)
        }
        a = 22
        f3()
    }
    console.log(a)
    a = 100
    f2()
}
f1()
Copy the code

It is important to remember that a function declaration and a function call are not the same thing. The value of the variable used in the function declaration may have changed before the call

closure

A function and the variables outside the function it uses constitute a closure

Closures allow you to access an external function scope from an internal function

For more details on closures: developer.mozilla.org/zh-CN/docs/…

This article is the original article of FJL, the copyright belongs to myself and hungry people valley all, reprint must indicate the source