先来看下面这段代码,猜猜这段代码会打印出 0 1 2 3 4 5
还是 6 6 6 6 6 6
呢?
// ES6 的 let 和 箭头函数语法
let i = 0;
for(i = 0; i < 6; ++i) {
setTimeout(() => {
console.log(i)
}, 0)
}
答案是 6 6 6 6 6 6
。
先来用例子来解释 setTimeout
函数的作用: 小明正在打游戏, 妈妈喊他吃饭, 小明回答道: 马上就去吃饭,然后接着打完(一会)游戏。这里的马上就去就相当于 setTimeout
, 吃饭就相当于 console.log
, 但实际上还是先完成当前的事情,即 for
循环。
不过为什么会这样呢?这跟 JS 函数的执行机制有关, 要知道 setTimeout
是一个异步的函数, 那么这段代码的执行就变成了, 先走完整个循环,这时 i
已经变成了 6,才开始执行 6 个 console.log(i)
,所以最终只会打印出 6 个 6。
换句话说, 函数什么时候开始调用,什么时候才开始查询参数的值。
那有没有什么办法能够解决这个问题, 我就想这样,然后还要打印出 0 1 2 3 4 5
。有的,只需要稍稍改变一下就 ok 了。
for(let i = 0; i < 6; ++i) {
setTimeout(() => {
console.log(i)
}, 0)
}
发现没有, 仅仅改变 let
的位置, 当 for
和 let
结合,就能有如此奇效, 这就是 JS 给小白的爱。
那还有没有别的办法, 在 ES6 之前,还真有另外的两种方法,一种是利用 setTimeout
的第三个参数,另外一种是利用闭包。
// 第一种方法
for (var i=0; i<6; ++i) {
setTimeout(function(i){
console.log(i)
}, 0, i)
}
// 第二种方法
for(var i=0; i<6; ++i) {
!(function(j) {
setTimeout(function(){
console.log(j)
}, 0)
})(i)
}