循环和闭包

jsCopy
for (var i = 1; i <= 5; i++) {
    setTimeout(()=>{
        console.log(i);//Mutable variable is accessible from closure 
    },i*1000);
}

预期结果输出1到5，每隔一秒，一秒一个
实际结果输出6个6，每隔一秒，一秒一个

为什么

延迟函数的回掉会在循环结束时才执行。即使setTimeout(()=>,0),回调依然是在循环结束后才会被执行。因此会每次输出一个6。

怎么改

ES5

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

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

jsCopy

ES6

jsCopy

jsCopy

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

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

for (let i = 1; i <= 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, i * 1000);
}