js闭包结合定时器的题目详解(面试题之一)

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

为毛是这样的结果呢，大家对比一下两个函数有什么不同，仔细看发现两点

1. 一个是setTimeout,一个是setInterval,这个区别导致后面结果中，最后一输出3
2. 定时器后面的参数不一样，setInterval多一个tc参数，并且匿名函数中接受了这个tc参数（敲黑板，划重点！！！）,对定时器传参不明白的点击进去看https://developer.mozilla.org...

对fn1函数稍稍改变一下呢

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

如上图，可以看出函数执行顺序，在第一个定时器里的函数执行时，tc变量保存在内存中的值是6449，也就是最后一个定时器的id,setTimeout中的函数每次访问的便是tc变量内存中的6449，所以每次都是清除的最后一个定时器，最后一个定时器还没执行就已经被清除了，所以最后打印出0，1，2

---

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

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