使用 J*aScript 类等待特定按键

技术教程
2025-10-14 09:17:32

使用 javascript 类等待特定按键

本文将介绍如何在 J*aScript 类中实现等待特定按键事件触发后再继续执行的功能。我们将通过 Promise 和事件监听器来实现这一目标，并提供两种不同的实现方式：一种基于 Promise，另一种不使用 Promise，而是直接绑定事件监听器。通过本文，你将学习到如何在类中正确地处理异步事件，并避免常见的 `this` 指向问题。

使用 Promise 实现按键等待

一种常见的实现方式是使用 Promise 来处理异步的按键事件。这种方法允许你将按键等待封装在一个可等待的函数中，从而使代码更加清晰和易于管理。

以下是一个使用 Promise 实现按键等待的 J*aScript 类的示例：

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。当用户按下 "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 的指向问题。

逍遥内容管理系统(Carefree CMS)1.3.0

系统简介逍遥内容管理系统（CarefreeCMS）是一款功能强大、易于使用的内容管理平台，采用前后端分离架构，支持静态页面生成，适用于个人博客、企业网站、新闻媒体等各类内容发布场景。核心特性1、模板套装系统 - 支持多套模板自由切换，快速定制网站风格2、静态页面生成 - 一键生成纯静态HTML页面，访问速度快，SEO友好3、文章管理 - 支持富文本编辑、草稿保存、文章属性标记、自动提取SEO4、全

1 查看详情逍遥内容管理系统(Carefree CMS)1.3.0

以下是一个不使用 Promise 实现按键等待的 J*aScript 类的示例：

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();

代码解释：

constructor() 方法：
- 使用 this.doStuff = this.doStuff.bind(this) 来确保 doStuff 方法中的 this 指向类的实例，而不是 window 对象。这是因为在事件监听器中，this 的默认指向是绑定事件的元素（这里是 window）。
- 将 doStuff 方法绑定到 keydown 事件。
doStuff() 方法：
- 检查按下的键是否是 "z"。如果不是，则直接返回，不执行任何操作。
- 如果是 "z"，则移除事件监听器，并执行后续的代码。

注意事项：

使用 bind(this) 来确保 this 指向正确。否则，在事件处理函数中访问类的属性或方法时可能会出错。
同样，确保在检测到正确的按键后移除事件监听器。

总结

本文介绍了两种在 J*aScript 类中实现等待特定按键事件的方法。使用 Promise 的方法更加灵活，并且可以更好地处理异步操作。不使用 Promise 的方法可能更简洁，但需要更小心地处理 this 的指向问题。在选择使用哪种方法时，请根据你的具体需求和代码风格进行权衡。无论选择哪种方法，都要确保正确地添加和移除事件监听器，以避免内存泄漏和不必要的事件触发。

以上就是使用 J*aScript 类等待特定按键的详细内容，更多请关注其它相关文章！