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)
	 })
}

在这里插入图片描述

发布了38 篇原创文章 · 获赞 17 · 访问量 9007

猜你喜欢

转载自blog.csdn.net/cainiao1412/article/details/101527941
今日推荐