本文将介绍如何在 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 的绑定问题。 选择哪种方法取决于您的具体需求和偏好。
以上就是JavaScript：让类等待特定按键事件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529448.html
微信扫一扫 
支付宝扫一扫 
