JavaScript：让类等待特定按键事件

本文将介绍如何在 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();

代码解释：

1. waitForKeyPress() 方法返回一个 Promise 对象。
2. 在 Promise 的构造函数中，我们定义了一个名为 listener 的事件处理函数。
3. listener 函数检查按下的键是否为 "z"。 如果是，则移除事件监听器并调用 resolve() 方法，从而解决 Promise。
4. doStuff() 方法使用 await 关键字等待 waitForKeyPress() 方法返回的 Promise 对象被解决。

注意事项：

立即学习“Java免费学习笔记（深入）”；

• 确保在 resolve() Promise 之前移除事件监听器，以防止重复触发事件处理函数。
• 使用 window.addEventListener 而不是 document.body.addEventListener 可以确保监听器在整个窗口范围内有效。

不使用 Promise 实现按键等待

虽然 Promise 是一种处理异步操作的强大方式，但在某些情况下，您可能希望避免使用 Promise。 下面是使用事件监听器和类绑定的另一种方法：

英特尔AI工具

英特尔AI与机器学习解决方案

70

查看详情

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

代码解释：

1. 在构造函数中，我们将 doStuff 方法绑定到类的实例，以确保 this 在事件处理函数中指向正确的对象。
2. 我们使用 window.addEventListener 监听 keydown 事件，并将 doStuff 方法作为事件处理函数。
3. doStuff 方法检查按下的键是否为 "z"。 如果不是，则直接返回，不执行任何操作。 如果是，则移除事件监听器并执行后续代码。

注意事项：

立即学习“Java免费学习笔记（深入）”；

• 必须使用 bind 方法将 doStuff 方法绑定到类的实例，否则 this 在事件处理函数中将指向 window 对象。
• 同样，使用 window.addEventListener 可以确保监听器在整个窗口范围内有效。

总结

本文介绍了两种在 JavaScript 类中实现等待特定按键事件的方法。 使用 Promise 的方法更加灵活，可以与其他异步操作很好地集成。 不使用 Promise 的方法更加简洁，但需要注意 this 的绑定问题。 选择哪种方法取决于您的具体需求和偏好。

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