TypeScript中等待自定义事件后执行后续逻辑的实现疑问

你的核心需求是让firstToComplete()等待window上的complete事件触发后，再执行secondToComplete()。当前代码的问题主要在于事件监听没有正确绑定，Promise的resolve逻辑没有和事件触发关联起来。以下是修正后的完整代码：

async ready(): Promise<boolean> {
    await this.myClass.firstToComplete();
    this.myClass.secondToComplete();
    return true; // 满足返回Promise<boolean>的类型要求
}

export class myClass {
    private static completion_event = new Event("complete");
    private anEventListener?: () => void; // 定义事件处理函数类型

    firstToComplete(): Promise<void> {
        return this.listening();
    }

    private listening(): Promise<void> {
        return new Promise(resolve => {
            // 创建事件处理函数，触发时resolve Promise并移除监听
            this.anEventListener = () => {
                resolve();
                window.removeEventListener("complete", this.anEventListener!);
                this.anEventListener = undefined;
            };
            // 将处理函数绑定到window的complete事件上
            window.addEventListener("complete", this.anEventListener);
        });
    }

    secondToComplete(): void {
        // 此处编写需要执行的业务逻辑
        console.log("secondToComplete 已执行");
    }

    static functionWaitingToComplete(): void {
        window.dispatchEvent(myClass.completion_event);
    }
}

关键修正说明： #

• 事件监听绑定：在listening方法中，将创建的resolve逻辑函数实际添加到window的complete事件监听中，确保事件触发时能触发Promise的resolve。
• 内存泄漏防护：事件触发后立即移除监听，避免后续重复触发或不必要的内存占用。
• 类型与逻辑对齐：把anEventListener修正为事件处理函数类型，而非async方法，符合浏览器事件监听的要求。
• 返回值合规：ready方法返回true，满足Promise<boolean>的返回类型约定。
• 静态成员访问：静态方法functionWaitingToComplete通过类名访问静态属性completion_event，避免上下文混淆。

触发逻辑示例： #

当调用myClass.functionWaitingToComplete()时，会触发window上的complete事件，此时firstToComplete()的Promise会被resolve，后续的secondToComplete()会立即执行。

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