for循环+计时器,如何实现i按序输出
for (var i = 0; i < 10; i++) {
setTimeout(function ten() {
console.log(i);
}, 10);
} // 输出结果是10个10
问:为什么输出的是10个10?
答:JS是一个单线程的解释器,setTimeout
本质是间隔一定时间将任务从消息队列中取出执行。输出的时候for循环作为主线程已经执行完毕,此时作用域中的i=10
;按序执行10次输出i
,就会输出10个10
问:如何输出成按序输出?
方法一:立即执行的函数(闭包)
for (var i = 0; i < 10; i++) {
(function (a) {
setTimeout(function ten() {
console.log(a);
}, 10)
})(i);
}
方法二:let 块级作用域
for(let i=0;i<10;i++){
setTimeout(function ten(){
console.log(i);
},10);
}
方法三:使用setTimeout
的第三个参数(闭包)
for (var i = 0; i < 10; i++) {
setTimeout(function ten() {
console.log(i);
}, 10, i);
}
// 或
for (var i = 0; i < 10; i++) {
function ten(a) {
console.log(a);
}
setTimeout(ten(i), 10);
}