JS 函数的执行时机

JS函数的不同执行时机,会影响到函数运行的输出结果,不能通过代码本身百分百判断函数输出什么,而是要根据函数具体的执行时机。

1 看下方代码

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

在这里插入图片描述

上面的代码执行输出了6个6,为什么呢?因为setTimeout是一个异步任务,执行到这里的操作会被浏览器丢到另一个任务队列里去,浏览器这时候会继续往下执行,把下面的代码都执行完了才会来执行setTimeout函数里的操作,这时候因为for循环已经把i加到6了,所以输出的全部都是6.

2 怎么样让上面代码打印 0、1、2、3、4、5 ?

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

在这里插入图片描述

将i定义到for循环体中,输出的就是我们想要的结果了,为什么呢?

因为let变量的作用域只能在当前函数中,所以每次for循环生成的都是一个新的i,setTimeout里输出的i就是这个新的i,这个i是不会变化的,所以输出的就是正常的。

3 除了使用 for let 配合,还有什么其他方法可以打印出 0、1、2、3、4、5

3.1 使用函数闭包,我们定义一个匿名函数,并且把当前的i当做value传进入输出,即可打印出正确结果
let i
for(i = 0; i<6; i++){
    !function(value) {
          setTimeout(()=>{
            console.log(value)
          },0)
    }(i)
}

在这里插入图片描述
3.2 利用setTimeout的第三个参数,将i传进去当做value打印出来即可
let i
for(i = 0; i<6; i++){

          setTimeout((value)=>{
            console.log(value)
          },0,i)

}

在这里插入图片描述
3.3 利用const关键字
let i
for(i = 0; i<6; i++){
    const x = i
    setTimeout(()=>{
       console.log(x)
     })
}

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

推荐阅读更多精彩内容

  • JS函数中,对函数调用的时机不同,得到的结果也会不一样,例如 下面这段代码 : 执行结果如下 : 结果显示打印出来...
    云卷云舒听雨声阅读 228评论 0 0
  • 一、关于“打印6个6”的解释分析 ·首先声明变量i,并赋值为0·进行for循环,循环次数为6次·循环过程中,i的值...
    scotton阅读 74评论 0 0
  • JS函数的执行时机 在解释JS函数的执行时机之前,先来看一个例子 将console.log打印出来是什么呢?答案是...
    茜Akane阅读 152评论 0 0
  • 函数执行时机不同,运行结果也不同 同步任务: 上一件事情没有完成,继续处理上一件事情,只有上一件事情完成了,才会做...
    卢卢2020阅读 232评论 0 0
  • 一、 解释为什么如下代码会打印 6 个 6 setTimeout函数会优先执行之前的事件,最后再执行后续的事件。而...
    快到碗里阅读 155评论 0 0