setTimeout与闭包

2018-02-27

本文主旨在于理解setTimeout的使用，弄懂JavaScript的队列执行，搞清常见面试题例一的多种解法。
setTimeout作为一个函数分发器，函数会立即执行，而分发的任务，即第一个参数会延迟执行

理解setTimeout的使用

var timer = setTimeout(function() {
    console.log('一秒钟之后我将被打印出来')
}, 1000);
clearTimeout(timer); //清除之后，通过timeout定义的操作不会执行

队列结构，页面所有setTimeout操作都将放在同一个队列执行，而该队列的执行时间，需要等待到函数调用栈清空才开始执行。

理解setTimeout使用

setTimeout(function() {
    console.log(a);
}, 0);
var a = 10;
console.log(b);
console.log(fn);
var b = 20;
function fn() {
    setTimeout(function() {
        console.log('setTImeout 10ms.');
    }, 10);
}
fn.toString = function() {
    return 30;
}
console.log(fn);
setTimeout(function() {
    console.log('setTimeout 20ms.');
}, 20);
fn();

上例输出结果依次：

undefined，
function fn() {
    setTimeout(function() {
        console.log('setTImeout 10ms.');
    }, 10);
}，
30，
10，
setTImeout 10ms.，
setTImeout 20ms.

常见闭包面试题

例一：
for(var i=0;i<=5;i++){
    setTimeout(function timer(){
        console.log(i);
    },i*1000);
}
每隔一秒输出输出6个6

修改例一，使结果每隔1秒输入1，2，3，4，5.

方案一：使用自执行函数提供闭包条件，传入i值并保存在闭包中

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

方案二：在setTimeout第一个参数中利用闭包

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

方案三：使用let构建块级作用域

for(let i=1;i<=5;i++){
    setTimeout(function timer(){
        console.log(i);
    },i*1000);
}  // 0,1,2,3,4,5

方案四：利用bind方法

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

方案五：利用setTimeout的第三个参数

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

参考文章：
setTimeout与闭包—-这波能反杀
如有错误，烦请指正，谢谢！