setTimeout(),定时器,想必大家都不陌生,在我们使用时,通常会传入两个参数,第一个是一个箭头函数,第二个是自己设置的一个时间。但是,setTimeout()其实还存在第三个参数,相信很多人都没有用过,甚至我相信,知道这个参数知道的人也比较少。
我们来看一个小例子
for(var i = 0; i < 5; i++){
setTimeout(() =>{
console.log(i)
},1000)
}
观察代码,我们想象的输出结果是每隔一秒输出一个数,最后结果为1 2 3 4 5,可是,当我们真的到控制台上观察结果时,可以看到,它在一秒钟之内输出了5个5。其原因呢是因为setTimeout是一个异步函数,他会在整个for循环执行完成之后再打印结果。当然解决的方法也有很多种,下面是其中两种解决方案。
闭包
for(var i = 0; i < 5; i++){
(function (j){
setTimeout(() =>{
console.log(j)
},j * 1000)
})(i)
}
我们定义了一个立即执行函数,因为闭包在函数执行时是不会被销毁的,每次传进去的i的值都会保存在内存空间中。
setTimeout()的第三个参数
for(var i = 0; i < 5; i++){
setTimeout((j) =>{
console.log(j)
},i * 1000,i)
}
这里第三个参数我们拿到的就是i的值,并且作为参数传给了定时器,当然第三个参数也不一定是一个值,也可以是定义的其他的函数或者新建一个定时器这类的。