阅读 58

JS 函数的执行时机

解释函数的执行时机

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

问:为什么会打印出6个6? 首先我们看一下setTimeout()的几个小知识

  • setTimeout最快执行时间是4毫秒。
  • 使用setTimeout的函数会比当前队列的函数慢执行,在他们的后面。
  • setTimeout中的定时器并不是准确的时间,实际中它需要在执行完前面的函数后才定时执行。

由此可以知道在代码中,是先执行完for循环,然后再setTimeout()里面的代码,当for循环执行完后,i最后的值为6,所以就打印输出 6个6

如何打印出0~5?

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
复制代码
  • 上面代码中,变量ilet声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量.
  • 可以查看这篇文章学习letvar之间的一些区别let 和 const 命令或者直接查阅mdn文档

其他打印出0~5的方法

另外我在网上找到其他的两种办法来实现这个效果

  • 使用 setTimeout 的第三个参数,另外一种是利用闭包(注:在es6之前):
// 第一种方法
for (var i=0; i<6; ++i) {
    setTimeout(function(i){
        console.log(i)
	}, 0, i)
}
// 第二种方法
for(var i=0; i<6; ++i) {
    !(function(j) {
        setTimeout(function(){
            console.log(j)
            }, 0)
	})(i)
}
复制代码

参考文档:JS 函数的执行时机(for,let和setTimeout()的结合使用 作者:徒手敲代码;

文章分类
前端
文章标签