JS 函数的执行时机

为什么以下代码会打印出6个6,而不是012345呢?
let i = 0
for(i = 0; i < 6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
原因:

setTimeout是用于延迟执行代码的函数,它会把要执行的函数放到 Event Loop 的最后面去,而当前循环体又在setTimeout前面,因此上面的代码相当于:

let i = 0;
i++;
i++;
i++;
i++;
i++;
i++;
console.log(i)
console.log(i)
console.log(i)
console.log(i)
console.log(i)
console.log(i)

因此会打印出6个6。

而使用 let 配合 for 循环就可以避免这个问题了:

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

使用闭包和立即执行函数也可以实现:

for(var i = 0; i < 6; i++) {
  setTimeout(
    (function(){
      var n = i;
      return function() {console.log(n)}
    })()
  )
}

setTimeout传入一个立即执行函数,立即执行函数会马上求值而不是等到Event Loop的最后,利用这个机会,把当前循环内的i记录在函数体内,和return的函数形成闭包,也就能打印出i传入时的值了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、关于“打印6个6”的解释分析 ·首先声明变量i,并赋值为0·进行for循环,循环次数为6次·循环过程中,i的值...
    scotton阅读 643评论 0 0
  • 先看代码,猜测一下会打印出什么 打印结果,如图 对的,会打印出6个6,为什么会这样呢,不应该是打印出0-5嘛 解释...
    luci_dity阅读 1,014评论 0 0
  • 1. 常见的面试题代码解释 // 6 个 6JS是单线程运行的,setTimeout(code,millisec)...
    张德瘦嬢嬢阅读 1,566评论 0 0
  • 1.解释为什么如下代码会打印 6 个 6 首先setTimeout的作用是等一会再执行。for循环会先进行执行,i...
    此人长期不在线阅读 1,261评论 0 0
  • 学习循环的时候大家应该都试过类似下面的代码: 很明显运行代码会依次打印出0-5,代码执行顺序也很清楚,每次加一都执...
    Amber886阅读 1,111评论 0 0