关于循环变量溢出为全局变量的问题-->经典例题及几种解决思路

67 阅读1分钟

改造下面的代码,使之输出0 - 9,写出你能想到的所有解法

for (var i = 0; i < 10; i++) { setTimeout(() => { console.log(i); }, 1000) }

1、使用let,形成块级作用域

for (let i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i);
    }, 1000)
}

2、通过闭包

for (var i = 0; i < 10; i++) {
    (function (t) {
        setTimeout(() => {
            console.log(t);
        }, 1000)
    })(i)
}

3、使用setTimeout的第三个参数,会作为回调函数的第一个参数传入

js for (var i = 0; i < 10; i++) { setTimeout(i => { console.log(i); }, 1000, i) }

上述三种做法都是1s后一次新输出所有值 下面用promise的做法可以做到每隔1s输出一个

4、使用promise

用reduce的形式每次添加一个.then来形成一个promise链,这样的话会间隔1s输出一个

let arr = [];
for (let i = 1; i <= 10; i++) {
    arr.push(i)
}
arr.reduce((pre, cur) => {
    pre = pre.then(() => new Promise(r => setTimeout(() => r(console.log(cur)), 1000)))
    return pre;
}, Promise.resolve())

5、使用async/await

(async function () {
    for (var i = 0; i < 10; i++) {
        await new Promise(r => setTimeout(() => r(console.log(i)), 1000))

    }
})()