在 for 循环中使用 setTimeout 中可能会出现结果输出不符合预期:
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i);
});
}
最后的输出结果:
5
5
5
5
5
原因是 var 变量不存在块级作用域,这5次循环中 setTimeout 使用的 i 其实都是一个 i,而setTimeout 异步执行会在 for 循环之后执行。
因此 setTimeout 获取的 i 都是最后执行完循环后的 i 为 5。
解决方法有三种:
使用 let 创建块级作用域
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i);
});
}
使用闭包创建函数作用域
for (var i = 0; i < 5; i++) {
((i) => {
setTimeout(() => {
console.log(i);
});
})(i);
}
使用 setTimeou 的参数,相当于也是创建了闭包。这种方法用的少,因为大部分人都没有用过setTimeout 还可以在后面给函数传递参数。
for (var i = 0; i < 5; i++) {
setTimeout(
(i) => {
console.log(i);
},0,i);
}