如何让JavaScript类等待指定按键按下后再继续执行？

你的类代码问题出在错误按键时的递归逻辑：当按下非"z"键时，你移除了当前的键盘监听器，然后调用this.waitForKeyPress()创建了一个新的Promise和监听器，但最初的waitForKeyPress()返回的Promise并没有被resolve或reject，外部的await会一直等待这个悬而未决的Promise，导致后续代码永远无法执行。

而你的函数形式代码看似能工作，其实是因为非严格模式下函数中的this指向全局对象，递归调用的waitForKeyPress()会重新创建新的Promise链，但最初的Promise同样处于悬而未决状态，只是你没注意到后续的console.log来自新的调用链，而非最初的doStuff执行流程。

修复方案一：保持监听器直到正确按键（更高效） #

不需要递归，错误按键时不移除监听器，持续等待正确的"z"键：

class exampleClass {
    async waitForKeyPress() {
        return new Promise((resolve) => {
            const listener = (e) => {
                if(e.key === "z") {
                    document.body.removeEventListener("keydown", listener);
                    resolve();
                }
                // 错误按键时不做操作，继续监听
            }
            document.body.addEventListener("keydown", listener);
        });
    }

    async doStuff() {
        await this.waitForKeyPress();
        console.log("correct key pressed");
        // do stuff
    }
}

let exampleObject = new exampleClass();
exampleObject.doStuff();

修复方案二：修正递归逻辑（保留递归思路） #

如果一定要用递归，需要让新的Promise结果传递到最初的Promise中，确保外部await能正确等待：

class exampleClass {
    async waitForKeyPress() {
        return new Promise(async (resolve) => {
            const listener = async (e) => {
                document.body.removeEventListener("keydown", listener);
                if(e.key === "z") {
                    resolve();
                } else {
                    // 等待递归调用的Promise完成后，再resolve最初的Promise
                    await this.waitForKeyPress();
                    resolve();
                }
            }
            document.body.addEventListener("keydown", listener);
        });
    }

    async doStuff() {
        await this.waitForKeyPress();
        console.log("correct key pressed");
        // do stuff
    }
}

let exampleObject = new exampleClass();
exampleObject.doStuff();

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