本文将介绍如何在 JavaScript 类中实现等待特定按键事件触发后再继续执行的功能。我们将探讨使用 Promise 和事件监听器来实现这一目标，并提供两种不同的实现方法，包括使用 Promise 和不使用 Promise 的方法，以便读者可以根据实际情况选择最合适的方案。
使用 Promise 实现按键等待
这种方法的核心在于使用 Promise 来创建一个异步操作，该操作在接收到特定按键事件后才会 resolve。 通过 addEventListener 监听 keydown 事件，并在事件处理函数中检查按下的键是否为目标键。 如果是，则移除事件监听器并 resolve Promise，从而允许后续代码继续执行。
class ExampleClass {
async waitForKeyPress() {
return new Promise((resolve) => {
const listener = (e) => {
if (e.key === "z") {
window.removeEventListener("keydown", listener);
resolve();
}
};
window.addEventListener("keydown", listener);
});
}
async doStuff() {
await this.waitForKeyPress();
console.log("correct key pressed");
// do stuff
}
}
let exampleObject = new ExampleClass();
exampleObject.doStuff();代码解释：
- waitForKeyPress() 方法返回一个 Promise 对象。
- 在 Promise 的构造函数中，我们定义了一个名为 listener 的事件处理函数。
- listener 函数检查按下的键是否为 "z"。 如果是，则移除事件监听器并调用 resolve() 方法，从而解决 Promise。
- doStuff() 方法使用 await 关键字等待 waitForKeyPress() 方法返回的 Promise 对象被解决。
注意事项：
立即学习“Java免费学习笔记（深入）”；
- 确保在 resolve() Promise 之前移除事件监听器，以防止重复触发事件处理函数。
- 使用 window.addEventListener 而不是 document.body.addEventListener 可以确保监听器在整个窗口范围内有效。
不使用 Promise 实现按键等待
虽然 Promise 是一种处理异步操作的强大方式，但在某些情况下，您可能希望避免使用 Promise。 下面是使用事件监听器和类绑定的另一种方法：
class ExampleClass {
constructor() {
// 绑定 this，确保 doStuff 函数中的 this 指向类实例
this.doStuff = this.doStuff.bind(this);
window.addEventListener("keydown", this.doStuff);
}
doStuff(e) {
if (e.key !== 'z') return;
window.removeEventListener("keydown", this.doStuff);
console.log("correct key pressed");
// do stuff
}
}
let exampleObject = new ExampleClass();代码解释：
- 在构造函数中，我们将 doStuff 方法绑定到类的实例，以确保 this 在事件处理函数中指向正确的对象。
- 我们使用 window.addEventListener 监听 keydown 事件，并将 doStuff 方法作为事件处理函数。
- doStuff 方法检查按下的键是否为 "z"。 如果不是，则直接返回，不执行任何操作。 如果是，则移除事件监听器并执行后续代码。
注意事项：
立即学习“Java免费学习笔记（深入）”；
- 必须使用 bind 方法将 doStuff 方法绑定到类的实例，否则 this 在事件处理函数中将指向 window 对象。
- 同样，使用 window.addEventListener 可以确保监听器在整个窗口范围内有效。
总结
本文介绍了两种在 JavaScript 类中实现等待特定按键事件的方法。 使用 Promise 的方法更加灵活，可以与其他异步操作很好地集成。 不使用 Promise 的方法更加简洁，但需要注意 this 的绑定问题。 选择哪种方法取决于您的具体需求和偏好。
