for循环+计时器,如何实现i按序输出

Posted by CodingWithAlice on July 11, 2019

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);
}