循环中使用闭包解决 var 定义函数的问题

//本文首发于掘金社区，链接：https://juejin.im/post/5d7461c6e51d453bc470df4f

 

经典面试题，循环中使用闭包解决 var 定义函数的问题

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


复制代码

首先因为 setTimeout 是个异步函数，所有会先把循环全部执行完毕，这时候 i就是 6 了，所以会输出一堆 6。

解决办法有三种，第一种使用闭包

for (var i = 1; i <= 5; i++) {

(function(j) {

setTimeout(function timer() {

console.log(j);

}, j * 1000);})(i);}

复制代码

第二种就是使用 setTimeout 的第三个参数

for ( var i=1; i<=5; i++) {

setTimeout( function timer(j) {

console.log( j );

}, i*1000, i);}

复制代码

第三种就是使用 let 定义 i 了

for ( let i=1; i<=5; i++) {

setTimeout( function timer() {

console.log( i );

}, i*1000 );}

复制代码

 

因为对于 let 来说，他会创建一个块级作用域，相当于

 

 

 

{ // 形成块级作用域

let i = 0

{let ii = isetTimeout( function timer() {

console.log( i );

},i*1000 );

}
i++

{let ii = i}

i++

{let ii = i}

...

}