JS 函数的执行时机

JS中采用function命令声明函数(具名函数),会被提升到代码顶部。

例如:

fn();

function fn() {}
复制代码

上面的代码看起来像是在函数声明前就调用函数,会报错。但实际上声明函数fn时,被提升到代码头部,也就是在调用前就已经声明了,不会报错。但是使用匿名函数则会报错。

案例

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}     //打印出6个6
复制代码

上面的代码会等到循环结束后再执行 setTimeout 中的打印;i = 5时,满足循环条件,继续进入循环体循环;直到 i = 6 时,不满足条件才跳出循环体,故打出6个6。

那么如何才能打出0、1、2、3、4、5?

可以使用forlet结合将代码改写:

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

当前i的作用域只在这个函数中,所以每次循环都会创建一个新的i。这个结果会被存储起来,直到循环完再打印出来。

使用其他方法来实现

使用闭包

let i 
for(i = 0; i<6; i++){
  !function(j){
      setTimeout(()=>{
        console.log(j)
      },0)
  }(i)
}
复制代码

将 i 作为 setTimeout 的第三个参数

let i
for(i = 0; i<6; i++){
    setTimeout((value)=>{
      console.log(value)
    },0,i)
}
复制代码

使用const

let i
for(i = 0; i<6; i++){
    const x = i
    setTimeout(()=>{
      console.log(x)
    })
}
复制代码

以上3种方法引用@_Phonon

分类:
前端
标签: