Promise链式调用setTimeout时then方法早于异步函数执行问题排查

你在hideLogoAnimation中返回的Promise没有调用resolve方法：

• Promise执行器默认接收resolve、reject两个参数，只有主动调用resolve()时，Promise才会切换为完成状态，后续绑定的.then()回调才会执行。
• 你当前的代码没有写resolve调用，这个Promise会一直处于pending状态，正常来说.then()里的代码应该完全不会执行；你观察到的.then()提前触发，大概率是你实际运行的代码中hideLogoAnimation没有正确返回Promise实例。

修改hideLogoAnimation函数如下即可：

function hideLogoAnimation() {
    console.log('hideLogoAnimation')
    // 给Promise执行器加上resolve参数
    return new Promise((resolve) => {
        setTimeout(() => {
            logo_animation.classList.remove('fadein')
            logo_animation.classList.add('fadeout')
        }, 500)
        setTimeout(() => {
            logo_animation.classList.remove('show')
            speech_bubble_middle_bar.style.display = 'unset'
            speech_bubble_bottom_bar.style.display = 'grid'
            freeze_input = false
            // 所有动画隐藏逻辑执行完毕后调用resolve，触发后续then回调
            resolve()
        }, 750)
    })
}

修改后所有logo隐藏操作执行完成后才会运行.then()中的文本、按钮显隐逻辑，顺序就能符合预期。

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