本文将介绍如何在 JavaScript 类中实现等待特定按键事件触发后再继续执行的功能。我们将通过 Promise 和事件监听器来实现这一目标，并提供两种不同的实现方式：一种基于 Promise，另一种不使用 Promise，而是直接绑定事件监听器。通过本文，你将学习到如何在类中正确地处理异步事件，并避免常见的 `this` 指向问题。
使用 Promise 实现按键等待
一种常见的实现方式是使用 Promise 来处理异步的按键事件。这种方法允许你将按键等待封装在一个可等待的函数中，从而使代码更加清晰和易于管理。
以下是一个使用 Promise 实现按键等待的 JavaScript 类的示例：
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。当用户按下 "z" 键时，Promise 将会被 resolve。
-
listener 函数： 这是一个事件监听器函数，它监听 keydown 事件。
- 当检测到按下的键是 "z" 时，它会首先移除自身的事件监听器，以防止重复触发。
- 然后，它会调用 resolve() 函数，从而 resolve Promise。
- doStuff() 方法： 这个方法使用 await 关键字来等待 waitForKeyPress() 方法返回的 Promise 被 resolve。一旦 Promise 被 resolve (即用户按下了 "z" 键)，它将继续执行后续的代码。
- 事件监听器移除： 只有当用户按下正确的键（这里是 "z" 键）时，才移除事件监听器。 原始代码中，如果按下的键不是 "z"，会递归调用 waitForKeyPress()，导致多次添加监听器，并且没有正确移除之前的监听器。
注意事项：
- 使用 window.removeEventListener 而不是 document.body.removeEventListener，因为监听器是添加到 window 上的。
- 确保在 Promise resolve 后移除事件监听器，避免内存泄漏和不必要的事件触发。
不使用 Promise 实现按键等待
另一种方法是不使用 Promise，而是直接在类的构造函数中绑定事件监听器。这种方法可能更简洁，但需要更小心地处理 this 的指向问题。
系统简介逍遥内容管理系统（CarefreeCMS）是一款功能强大、易于使用的内容管理平台，采用前后端分离架构，支持静态页面生成，适用于个人博客、企业网站、新闻媒体等各类内容发布场景。核心特性1、模板套装系统 - 支持多套模板自由切换，快速定制网站风格2、静态页面生成 - 一键生成纯静态HTML页面，访问速度快，SEO友好3、文章管理 - 支持富文本编辑、草稿保存、文章属性标记、自动提取SEO4、全
以下是一个不使用 Promise 实现按键等待的 JavaScript 类的示例：
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 指向类的实例，而不是 window 对象。 这是因为在事件监听器中，this 的默认指向是绑定事件的元素（这里是 window）。
- 将 doStuff 方法绑定到 keydown 事件。
-
doStuff() 方法：
- 检查按下的键是否是 "z"。如果不是，则直接返回，不执行任何操作。
- 如果是 "z"，则移除事件监听器，并执行后续的代码。
注意事项：
- 使用 bind(this) 来确保 this 指向正确。 否则，在事件处理函数中访问类的属性或方法时可能会出错。
- 同样，确保在检测到正确的按键后移除事件监听器。
总结
本文介绍了两种在 JavaScript 类中实现等待特定按键事件的方法。 使用 Promise 的方法更加灵活，并且可以更好地处理异步操作。 不使用 Promise 的方法可能更简洁，但需要更小心地处理 this 的指向问题。 在选择使用哪种方法时，请根据你的具体需求和代码风格进行权衡。 无论选择哪种方法，都要确保正确地添加和移除事件监听器，以避免内存泄漏和不必要的事件触发。
