js闭包结合定时器的题目详解

48次阅读

共计 731 个字符,预计需要花费 2 分钟才能阅读完成。

function fn1(){
for(var i=0;i<4;i++){
var tc = setTimeout(function(i){
console.log(i);
clearTimeout(tc)
},10,i)
}

}
function fn2(){
for(var i=0;i<4;i++){
var tc = setInterval(function(i,tc){
console.log(i);
clearInterval(tc)
},10,i,tc)
}
}
fn1();
fn2();
学习过程中遇到这样一个题目,第一眼看很懵逼,第二眼也懵逼,第三眼更懵逼,大家可以发动你的想象力猜一猜正确答案是多少,反正我是没猜对。

接下来,我分享一下我顺着答案,猜过程的调试过程吧,顺便揭晓一下答案
fn1()//0,1,2
fn2()//0,1,2,3,3,3,3,3,… 全是 3
为毛是这样的结果呢,大家对比一下两个函数有什么不同,仔细看发现两点

一个是 setTimeout, 一个是 setInterval, 这个区别导致后面结果中,最后一输出 3
定时器后面的参数不一样,setInterval 多一个 tc 参数,并且匿名函数中接受了这个 tc 参数(敲黑板,划重点!!!)

对 fn1 函数稍稍改变一下呢

在定时函数外面 tc 能正常打印,但是定时器里面 tc 一直是最后一个值, 这是为什么呢?

当 setTimeout 里面的 console.log 取值时,其实 tc 就已经就最后一个定时器的 id 了,所以每次都是清除的最后一个定时器,最后一个定时器还没执行就已经被清除了,所以最后打印出 0,1,2

希望能输出 0,1,2,3 咋办呢

将 tc 作为变量传入,函数内部是允许访问函数外部的值的,每一次清除的定时器都是上一次执行后的定时器,fn2() 也可以同理分析

正文完
 0