一道关于js定时器的《面试题》

Question

希望能够详细的讲解下clearTimeout(tc) 为什么就能把最后一个setTimeout给清除？

Answer 1

因为js没有块级作用域，只有全局作用域和函数作用域。所以，代码实际上是这样:

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

而且，for循环先被执行完，才开始执行定时器。所以，不存在各个定时器使用对应的ts临时值的情况，它们使用的都是ts最终的值。也就是：每个定时器中ts都指向了原fn1函数的ts，而此时ts的值是最后一个定时器，也就是第四个定时器。因此，在第一个定时器执行后，第四个定时器就被清除了。

Answer 2

改这样你就明白了

function fn1(){    for(var i=0;i <4; i++){        var tc = setTimeout(function(i){  
            console.log(i,' tc:',tc);
            clearTimeout(tc);
        },10,i)        console.log('i:',i,' tc:',tc);
    }
}
fn1();/* 输出大概是这个样子
i: 0  tc: 14609
i: 1  tc: 14610
i: 2  tc: 14611
i: 3  tc: 14612

0 " tc:" 14612
1 " tc:" 14612
2 " tc:" 14612
*/

你会发现 clearTimeout 的参数值没有变化, var 做用域的问题

如果你把 var tc = 改成 let tc = 就符合正常思维了