关于js闭包结合定时器的一个题目

2017-07-21  本文已影响73人  7天苹果
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();     //0,1,2
fn2();     //0,1,2,3,3,3,.......

先看fn1()函数:

我们可以对比之前我们常见的:

function fn1(){
    for(var i=0;i<4;i++){
        var tc=setTimeout(function(i){
            console.log(i);
        },10,i);
    }
}
fn1(); //延迟10ms后输出0,1,2,3 

而在闭包内添加了clearTimeout(tc);之后为什么3没有输出呢?
这是因为tc是在闭包外面的,并没有被保存,保存的只是最后一次循环留下的tc,所有最后一次的tc被清除,只输出了0,1,2

再看第二个fn2()函数:

可以发现区别就是把setTimeout改为了setInterval,同时把定时器也传到了闭包里。那最后一次的定时器为什么没有清除?
这里每次循环先设置定时器,然后把定时器的返回值赋值给tc。在第一次循环的时候tc并没有被赋值,所以是undefined,在第二次循环的时候,定时器其实清理的是上一个循环的定时器。如果调试的话就会发现第一次的tc为undefined,所以导致每次循环都是清理上一次的定时器,而最后一次循环的定时器没被清理,导致一直输出3。

感兴趣可以自己试一试哦~

上一篇 下一篇

猜你喜欢

热点阅读