【JavaScript】在循环内使用闭包

================== 基本循环语句 ==================
for (var i = 0; i < 5; i++) {
    console.log(i);
}
console.log(i);
//这个大家应该很快就知道了，012345


================== setTimeout与var语句的for循环 ==================
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
console.log(i);
//这个大家就要小心一点了，答案是5    55555
//在setTimeout执行之前，for循环早就执行完了，i的值早已经是5了，所以一开始是执行，最后面的console.log(i);
//在for循环的时候一下子自定义5个setTimeout，大概一秒后，就是输出55555


================== 立即执行函数 ==================
for (var i = 0; i < 5; i++) {
    (function(j) { // j = i
        setTimeout(function() {
            console.log(j);
        }, 1000);
    })(i);
}
console.log(i); 
//这里的解析和上面基本一样，只是用 闭包 来记录每一次循环的i,
//所以答案是5     01234


================== 闭包 ==================
var output = function (i) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
};

for (var i = 0; i < 5; i++) {
    output(i); // 这里传过去的 i 值被复制了
}
console.log(i);

//这里的解析和上面基本一样，把i当参数传进output，记录每一次循环的i,
//所以答案是5     01234


================== let语句 ==================
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
console.log(i);
//结果是  报错   01234 
//注意i是用let定义的，不是var

---

实际中的使用场景

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div

for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 总是5
    };
}

　　上方是一个很常见闭包问题，点击任何div弹出的值总是5，因为当你触发点击事件的时候i的值早已是5，可以用下面方式解决（共有上述分析中的立即执行函数、闭包、let语句 3种写法）：

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div

for(var i = 0; i < elem.length; i++) {
    (function (w) {
        elem[w].onclick = function () {
            alert(w); // 依次为0,1,2,3,4
        };
    })(i);
}

　　在绑定点击事件外部封装一个立即执行函数，并将i传入该函数即可。