本文将介绍如何在 JavaScript 类中实现等待特定按键事件触发后再继续执行的功能。我们将探讨使用 Promise 和事件监听器来实现这一目标，并提供两种不同的实现方式，包括基于 Promise 的异步方法和直接使用事件监听器的方法，以便在不同的场景下灵活应用。
使用 Promise 实现按键等待
一种实现方式是使用 Promise 对象来封装按键监听过程。Promise 允许我们以异步的方式处理按键事件，并在特定按键被按下时解析（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();代码解释:
立即学习“Java免费学习笔记（深入）”；
-
waitForKeyPress() 方法:
- 返回一个新的 Promise 对象。
- 定义一个名为 listener 的事件监听器函数，该函数会在每次按下键盘上的键时被调用。
- 在 listener 函数中，检查按下的键是否为 "z"。
- 如果按下的键是 "z"，则：
- 移除事件监听器，防止重复触发。
- 调用 resolve() 函数，表示 Promise 已成功解析。
- 将 listener 函数添加到 window 对象的 "keydown" 事件监听器中。
-
doStuff() 方法:
- 使用 await 关键字等待 waitForKeyPress() 方法返回的 Promise 对象解析。
- 当 Promise 解析后，打印 "correct key pressed" 到控制台。
- 执行其他操作。
-
实例化和调用:
- 创建一个 exampleClass 类的实例 exampleObject。
- 调用 exampleObject.doStuff() 方法，开始执行流程。
注意事项:
- 使用 window.removeEventListener 而不是 document.body.removeEventListener 可以确保移除的是全局的按键事件监听器。
- e.key === "z" 使用严格相等运算符，确保比较的是字符串类型。
不使用 Promise 的实现方式
另一种实现方式是不使用 Promise，而是直接使用事件监听器。这种方法更简洁，但可能在某些复杂的异步场景下不如 Promise 灵活。
class exampleClass {
constructor() {
// the reason for this line is because "this"
// inside doStuff will be window instead of
// the class itself.
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();代码解释:
立即学习“Java免费学习笔记（深入）”；
-
constructor() 构造函数:
- 使用 this.doStuff = this.doStuff.bind(this) 来绑定 doStuff 方法的 this 上下文，确保在事件监听器中 this 指向类的实例。
- 将 doStuff 方法添加到 window 对象的 "keydown" 事件监听器中。
-
doStuff() 方法:
- 检查按下的键是否为 "z"。如果不是，则直接返回，不执行任何操作。
- 如果按下的键是 "z"，则：
- 移除事件监听器，防止重复触发。
- 打印 "correct key pressed" 到控制台。
- 执行其他操作。
注意事项:
- 必须在构造函数中使用 bind 方法来绑定 this 上下文，否则在事件监听器中 this 将指向 window 对象。
- 这种方法更适合简单的场景，如果需要更复杂的异步控制，建议使用 Promise。
总结
本文介绍了两种在 JavaScript 类中等待特定按键事件的方法。第一种方法使用 Promise 对象，允许异步地处理按键事件。第二种方法直接使用事件监听器，更加简洁。选择哪种方法取决于具体的应用场景和需求。如果需要更复杂的异步控制，建议使用 Promise。否则，直接使用事件监听器可能更简单。
