js 等待某个函数执行完_JS 函数的执行时机

JS函数在不同的时候运行，会有不同的运行结果，本文将分别举例分析

• 案例一

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

注意：这里不会打印任何东西，因为函数只是声明了，但是没有调用

• 案例二

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

答案：1
因为一开始声明了 a , a 的值为1，然后调用函数 fn , 打印 a。

• 案例三

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

答案：2
因为在调用fn()之前，a 被赋值为2

小结：从以上的例子可以看出，我们在调用函数时，需要仔细注意其中用到的变量值是不是我们需要的值。

异步的案例

• 案例一

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

答案：2
setTimeout会等到当前代码执行完毕后，再执行，即执行完let a= 1, fn(), a=2之后，再执行console.log(a)，所以打印出来a是2

• 案例二

var i = 0
for(i = 0; i<6; i++){
    setTimeout(()=>{
        console.log(i)
    },0)
}

for(var i = 0; i<6; i++){
    setTimeout(()=>{
        console.log(i)
    },0)
}

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

答案：都会打印出6个6

原理是：setTimeout会等到当前代码执行完,不单指for循环，如果for循环外还有一句 console.log（“hi”），它会先打印“hi”，再去执行console.log(i)。

因为for循环执行完之后，i 是6, 所以会打印出6个6

关于setitmeout的通俗理解

你正在打游戏，还剩下最后一关，这时候妈妈让你去吃饭，你嘴上说马上，但其实会把游戏打完之后再去吃饭。这里的马上就对应： setTimeout(function, 0)

举个例子额外理解一下，看完你就会懂什么叫 当前代码执行完：

var i = 0
for(i; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
console.log('hi')
console.log(i)
 
 for(i; i<8; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
 console.log('aaa')
 console.log(i)
 console.log('bbb')

输出结果如下图：

• 案例三

如果希望在for循环使用settimeout时，能够依次打印出0,1,2,3,4,5，怎么写呢？

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

用Let就可以了，let 会单独创建一个作用域 相当于有6个 i ，相当于以下代码

(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)
};

• 案例四

除了使用Let，还可以这样解决：相当于每次把i保存下来

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

• 案例五

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()

答案：1 、22

如果一个函数用到了外部的变量

那么这个函数 加 这个变量就叫做 闭包