setTimeout()函数执行完结果却是 五个6 的原因是?
for (var i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i);
}, i * 1000);
}
// 其实我们想得到的结果是1,2,3,4,5,结果却是五个6
虽然用js 闭包解决了问题,得到想要的1,2,3,4,5,但还是不明白上述的代码为什么出现五个6?
for (var i = 1; i <= 5; i++) {
(function(j) {
setTimeout(function timer() {
console.log(j);
}, j * 1000);
})(i);
//通过一个立即执行函数,为每次循环创建一个单独的作用域
首先需要明白的一点JS的任务机制是队列机制。
所以没走一次for循坏只是把setTimeout这个任务放到队列后面,即setTimeout里面执行的代码只会在执行完for循坏才会执行,所以那个时候i的值就是不满足for循坏的值,才会去执行setTimeout的代码。
个人看法,有什么说的不对的欢迎指出
var 改为 let 即可
var 是全局定义,i 没有构成闭包,log(i)都是打印i的最终值 6
let 是块级定义域
setTimeout有2个特性,它的this与上下文的this分离,它的调用是异步的。
这里就是【异步】造成的,for循环会先全部完成,再执行setTimeout,因为for循环每次执行到最后都是6了- -所以自然setTimeout再调用i就是五个6
解决方法一:
解决方法二:
解决方法三: