最近些项目遇到个需求,在for循环中,给循环出来的元素添加自己定时器,这时候发现定时器只加了最后一个元素上面
具体看个例子你就明白了
for(var i = 0;i<4;i++){
setInterval(function(){
console.log(i)//这里永远输出一直是4
},1000)
}
因为定时器它是异步执行的,而for循环执行速度又很快,所以导致当开始执行定时器时。for循环已经执行完毕,所以它一直会输出最后一个i
解决方案:通过闭包的形式,把函数体单独放到一个函数里,在for循环中去调用,这样问题就解决了
for(var i = 0;i<4;i++){
fun(i)
}
function fun(i){
return setInterval(function(){
console.log(i)//这里会将每个下标都输入出来
},1000)
}
或者你也可以这样
for (var i = 0; i < 4; i++) {
setInterval(fun(i), 1000)
}
function fun(i) {
return function() {
console.log(i)
}
}
两种实现方式原理一样,都是通过闭包的形式去实现,只是写法有些不同,但打印的结果都是一样的,希望可以帮助到你们