JS中如何让async函数执行完毕后再调用后续函数？

你遇到的核心问题是：func 虽然标记为 async，但它内部的 setInterval 是独立的异步操作，且函数本身没有等待这个操作完成就直接返回了。await func() 本质上是等待一个立即resolve的Promise（async函数若未显式返回Promise，会默认返回已resolve的Promise），所以another_func会直接先执行。

要让func真正等待所有元素打印完成，需要把func改成返回一个Promise，并在setInterval执行完毕（即i === 4清除定时器时）手动resolve这个Promise。

修改后的完整代码：

const arr = ['a' , 'b' ,'c', 'd']

const func = async () => {
    // 返回Promise，绑定异步操作的完成时机
    return new Promise((resolve) => {
        let i = 0
        let interval = setInterval(() => {
            let x = arr[i++ % arr.length]
            console.log(x)
            if (i === 4 ) {
                clearInterval(interval)
                // 所有元素打印完成，触发Promise完成
                resolve()
            }
        }, 2000)
    })
}

const another_func = () => {
    console.log('logic')
}

const main = async () => {
    await func()
    another_func()
}
main()

• 用new Promise()包裹setInterval逻辑，将定时器的结束时机与Promise的resolve动作绑定
• 当i === 4清除定时器时调用resolve()，此时func的Promise才会变为完成状态，await func()才会继续执行后续的another_func()
• 这样就能保证先打印完a、b、c、d，再输出logic

内容的提问来源于stack exchange，提问作者Mohsin Shaikh