setTimeout 循环闭包的经典面试题 解法与探究

题:修改下面的代码，让循环输出的结果依次为1， 2， 3， 4， 5

for (var i=1; i<=5; i++) {
setTimeout( function timer() {
console.log(i);
}, i*1000 );
}

一、利用闭包:

1.匿名函数
//隔1s
for (var i=1; i<=5; i++) { 

    (function(i) {
        setTimeout( function timer() {
            console.log(i);
        }, i*1000 );
    })(i)
}

2.setTimeout的第一个参数处利用闭包。
//隔1s输出
for (var i=1; i<=5; i++) { 
    setTimeout( (function(i) {
        return function() {
            console.log(i);
        }
    })(i), i*1000 );
}

二、不利用闭包: 加深对setTimeout的理解

1.//瞬间输出 
for (var i=1; i<=5; i++) { 
    setTimeout(console.log(i), i*1000 );
}//就相当于用了for循环

2..//间隔1s
for (var i=1; i<=5; i++) { 
    setTimeout( function timer(a) {
        console.log(a);
    }, i*1000 ,i);
}//setTimeout的3及以后的参数为传入运行中的

3.瞬间输出
for (var i=1; i<=5; i++) { 
    setTimeout( function timer(a) {
        console.log(a);
    }(i), i*1000 )};

三.比较好玩的几个例子对比：及更深的理解
（1）.是否多个()，加个匿名函数包起来，在这里结果是一样的

//间隔1s
for(var i=1;i<=5;i++){
  setTimeout(function(i){
    return function(){
      console.log(i);
    };
  }(i),i*1000);
}//结果1，2，3，4，5

//多了一层匿名函数包裹
//间隔1s
for (var i=1; i<=5; i++) { 
    setTimeout( (function(i) {
        return function() {
            console.log(i);
        };
    })(i), i*1000 );
}//结果1，2，3，4，5

（2）.统一加匿名包，继续探究传入参数的问题

//间隔1s
for (var i=1; i<=5; i++) { 
    setTimeout( (function(i) {
        return function test(i) {
            console.log(i);
        };
    })(i), i*1000 );
}
//结果5个undefined....
//test(i)会把console.log(i)中的i看作test()函数的参数，而不是作用域外面的参数
//和下面的例子是一样的道理

for (var i=1; i<=5; i++) { 
    setTimeout( (function(i) {
        return function test(a) {
            console.log(a);
        };
    })(i), i*1000 );
}//结果5个undefined....
//间隔1s
for (var i=1; i<=5; i++) { 
    setTimeout( (function(i) {
        return function test(a) {
            console.log(i);
        };
    })(i), i*1000 );
}//结果1，2，3，4，5
//改了下console.log，使得传入的参数i能够传进

//瞬间输出
for (var i=1; i<=5; i++) { 
    setTimeout( (function(i) {
        return function test(a) {
            console.log(a);
        }(i);//注意这里
    })(i), i*1000 );
}//结果1，2，3，4，5

**总结：function()这才是函数的执行，function(x){}(2)这才能把2传入函数，function(){}(2)不能传入。**