10-13 01:07 阅读 78

JS 函数的执行时机

先来看一下这段代码

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

乍一看，很多人都会说，这还不简单，延时打出0-5呗。
...( ＿＿)ノ｜才不是好吧，它出来是这个东西

哇！你说为啥啊，好吧，仔细看一下，其实操作的一直都是for循环外部的i，而循环先执行，当循环已经执行完毕的时候,console.log(i)才开始执行，此时的i，早已变成了6，所以只会打印出6个6。

JS给出的答案是完全没问题！

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

按照这样的代码执行之后的结果是这样：

━┳━　━┳━神仙看了都流泪，哇哇哇，你说又是为啥啊。
好吧，JS为了符合你的意愿，相当于是每次执行for循环时候，在一个新的代码块中，执行了一次let i = x，就导致，每次打印出的值，其实就是每次循环的那个值，你可能说，let不是不能重复声明嘛？(￣▽￣)"

你看看上面代码，懂了嘛？

行，请看：除了let和for配合之外还有以下别的办法打印出0，1，2，3，4，5

使用立即执行函数

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

还可以使用setTimeout的第三个参数

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

使用const关键字

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

作者：BlickindieZukunft
链接：https://juejin.cn/post/7018349954041118756

推荐资源