使用 JavaScript 类等待特定按键

本文将介绍如何在 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免费学习笔记（深入）”；

1. waitForKeyPress() 方法： 这个方法返回一个 Promise。当用户按下 "z" 键时，Promise 将会被 resolve。
2. listener 函数： 这是一个事件监听器函数，它监听 keydown 事件。
   • 当检测到按下的键是 "z" 时，它会首先移除自身的事件监听器，以防止重复触发。
   • 然后，它会调用 resolve() 函数，从而 resolve Promise。
3. doStuff() 方法： 这个方法使用 await 关键字来等待 waitForKeyPress() 方法返回的 Promise 被 resolve。一旦 Promise 被 resolve (即用户按下了 "z" 键)，它将继续执行后续的代码。
4. 事件监听器移除： 只有当用户按下正确的键（这里是 "z" 键）时，才移除事件监听器。 原始代码中，如果按下的键不是 "z"，会递归调用 waitForKeyPress()，导致多次添加监听器，并且没有正确移除之前的监听器。

注意事项：

• 使用 window.removeEventListener 而不是 document.body.removeEventListener，因为监听器是添加到 window 上的。
• 确保在 Promise resolve 后移除事件监听器，避免内存泄漏和不必要的事件触发。

不使用 Promise 实现按键等待

另一种方法是不使用 Promise，而是直接在类的构造函数中绑定事件监听器。这种方法可能更简洁，但需要更小心地处理 this 的指向问题。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

以下是一个不使用 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免费学习笔记（深入）”；

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

注意事项：

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

总结

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

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