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

Question

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

Answer 1

因为js没有块级作用域，只有全局作用域和函数作用域。所以，代码实际上是这样:function&nbsp;fn1()&nbsp;{&nbsp;&nbsp;var&nbsp;ts,&nbsp;i;&nbsp;&nbsp;for(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;4;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;tc&nbsp;=&nbsp;setTimeout(function(i)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(ts); &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;10,&nbsp;i); &nbsp;&nbsp;} }而且，for循环先被执行完，才开始执行定时器。所以，不存在各个定时器使用对应的ts临时值的情况，它们使用的都是ts最终的值。也就是：每个定时器中ts都指向了原fn1函数的ts，而此时ts的值是最后一个定时器，也就是第四个定时器。因此，在第一个定时器执行后，第四个定时器就被清除了。

Answer 2

改这样你就明白了function&nbsp;fn1(){&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i=0;i&nbsp;<4;&nbsp;i++){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;tc&nbsp;=&nbsp;setTimeout(function(i){&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(i,'&nbsp;tc:',tc); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(tc); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},10,i)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('i:',i,'&nbsp;tc:',tc); &nbsp;&nbsp;&nbsp;&nbsp;} } fn1();/*&nbsp;输出大概是这个样子 i:&nbsp;0&nbsp;&nbsp;tc:&nbsp;14609 i:&nbsp;1&nbsp;&nbsp;tc:&nbsp;14610 i:&nbsp;2&nbsp;&nbsp;tc:&nbsp;14611 i:&nbsp;3&nbsp;&nbsp;tc:&nbsp;14612 0&nbsp;"&nbsp;tc:"&nbsp;14612 1&nbsp;"&nbsp;tc:"&nbsp;14612 2&nbsp;"&nbsp;tc:"&nbsp;14612 */你会发现 clearTimeout 的参数值没有变化, var 做用域的问题如果你把&nbsp;var tc =&nbsp;改成&nbsp;let tc =&nbsp;就符合正常思维了