await未决Promise后代码的状态及内存影响问题

我有一个被频繁调用的方法，其中包含若干await语句，语句后还有部分代码，但有时这些Promise会完全无法resolve，导致await后的代码永远不会被执行。我想了解这部分未执行的代码会有什么情况？频繁调用该方法是否会造成内存堆积，进而导致网站卡顿？

示例代码 #

class Test {
    constructor() {
        this.runTest();
    }

    playAnimation() {
        return new Promise((resolve) => {
            this.timeOut = setTimeout(() => {
                console.log('Anim completed.');

                resolve();
            }, 3000);
        });
    }

    stopAnimation = () => {
        document.body.removeEventListener('click', this.stopAnimation);

        clearTimeout(this.timeOut);
    };

    async method() {
        await this.playAnimation();

        // 如果点击两次，这个循环永远不会执行，因为Promise永远不会resolve
        for (let i = 0; i < 1000; i++) {
            // 一些操作
        }

        console.log('Promise resolve');
    }

    runTest = () => {
        document.body.removeEventListener('click', this.runTest);

        document.body.addEventListener('click', this.stopAnimation);

        document.body.addEventListener('click', this.runTest);

        this.method();
    };
}

new Test();

回答 #

未执行代码的状态 #

await语句后的代码会被打包成一个回调函数，挂载到Promise的resolve回调队列中。一旦Promise永远不resolve，这个回调就永远不会被推入浏览器的事件循环执行，相当于被“冻结”在内存里，永远没有机会运行。

频繁调用是否会导致内存堆积？ #

会，而且大概率会引发网站卡顿，原因如下：

• 每次调用async method()，JavaScript引擎都会创建一个异步函数上下文，包含函数的调用栈、变量环境、await后的代码片段等信息。这个上下文会被Promise对象持有，直到Promise状态变为resolved或rejected。
• 在你的示例中，点击stopAnimation会清除定时器，但对应的Promise没有任何状态变更——它的resolve回调永远不会触发，所以这个异步上下文会一直留在内存中，无法被垃圾回收器（GC）回收。
• 频繁调用method()的话，这类未被回收的上下文会不断累积，占用越来越多的内存。当内存占用过高时，浏览器会频繁触发GC（导致页面卡顿），甚至可能因为内存不足引发页面崩溃。

针对示例代码的优化方案 #

核心思路是：在停止动画时主动让Promise进入rejected状态，让异步函数的上下文可以被正常回收。

1. 修改playAnimation方法，保存reject引用：

playAnimation() {
    return new Promise((resolve, reject) => {
        this.timeOut = setTimeout(() => {
            console.log('Anim completed.');
            resolve();
        }, 3000);
        // 保存reject函数引用，用于主动终止Promise
        this.rejectAnimation = reject;
    });
}

2. 更新stopAnimation，主动reject Promise：

stopAnimation = () => {
    document.body.removeEventListener('click', this.stopAnimation);
    clearTimeout(this.timeOut);
    // 触发Promise的reject，让await逻辑进入错误分支
    if (this.rejectAnimation) {
        this.rejectAnimation('动画已停止');
        this.rejectAnimation = null;
    }
};

3. 在method中用try/catch捕获reject，确保上下文可以被回收：

async method() {
    try {
        await this.playAnimation();
        // 只有Promise正常resolve时才会执行这里的代码
        for (let i = 0; i < 1000; i++) {
            // 一些操作
        }
        console.log('Promise resolve');
    } catch (err) {
        console.log('动画终止:', err);
        // 这里可以添加必要的清理逻辑
    }
}

这样每次停止动画时，Promise会被主动reject，async函数执行完catch分支后，对应的上下文就会被GC正常回收，避免内存堆积问题。

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