如何修复循环内的异步代码以按顺序运行程序

Question

控制台下的代码日志为假，但我希望它为真如何使异步代码首先运行并在循环后使用迭代值

 const arr = [1, 2, 1, 2, 1, 2, 1]; let total = 0; for (let a of arr) { setTimeout(() => { if (a === 1) { total++; } }, 1000); } if (total === 4) { console.log('true'); } else { console.log('false'); }

Answer 1

因为setTimeout()是异步且非阻塞的，所以你的for循环只是设置了一堆计时器，然后在任何计时器触发之前立即运行检查total的代码，因此在任何计时器增加total之前。

要修复，您可以将超时更改为 promise 并使用async和await按顺序运行循环：

function delay(t) {
    return new Promise(resolve => {
        setTimeout(resolve, t);
    });
}

async function run() {

    const arr = [1, 2, 1, 2, 1, 2, 1];
    let total = 0;
    
    for (let a of arr) {
        await delay(1000);
        if (a === 1) {
            total++;
        } 
    }

    if (total === 4) {
        console.log('true');
    } else {
        console.log('false');
    }
}

run();

或者，并行运行所有计时器：

function delay(t) {
    return new Promise(resolve => {
        setTimeout(resolve, t);
    });
}

async function run() {

    const arr = [1, 2, 1, 2, 1, 2, 1];
    let total = 0;

    await Promise.all(arr.map(a => {
        return delay(1000).then(() => {
            if (a === 1) total++;
        });
    }));
    
    if (total === 4) {
        console.log('true');
    } else {
        console.log('false');
    }
}

run();