本文探討了如何在 JavaScript 類中實(shí)現(xiàn)異步等待特定按鍵事件的功能，以控制程序的執(zhí)行流程。通過(guò)深入分析基于 Promise 和 `async/await` 的解決方案，以及直接使用事件監(jiān)聽(tīng)器的替代方法，文章詳細(xì)闡述了兩種策略的實(shí)現(xiàn)細(xì)節(jié)、適用場(chǎng)景及關(guān)鍵注意事項(xiàng)，特別是事件監(jiān)聽(tīng)器的正確管理和 `this` 上下文的綁定。

在現(xiàn)代 Web 應(yīng)用開(kāi)發(fā)中，我們經(jīng)常需要程序在特定用戶交互（如按鍵）發(fā)生后才繼續(xù)執(zhí)行。當(dāng)這些邏輯被封裝在 JavaScript 類中時(shí)，如何優(yōu)雅地實(shí)現(xiàn)“等待”某個(gè)按鍵按下，尤其是在異步環(huán)境中，是一個(gè)常見(jiàn)的需求。本文將介紹兩種主要的方法來(lái)解決這個(gè)問(wèn)題：一種是利用 Promise 和 async/await 實(shí)現(xiàn)流程控制，另一種是采用更直接的事件驅(qū)動(dòng)模式。

1. 基于 Promise 和 async/await 的異步等待

這種方法適用于需要在一個(gè)異步序列中“暫?！眻?zhí)行，直到某個(gè)特定事件（這里是按鍵）發(fā)生。它利用了 Promise 的可解析性以及 async/await 提供的同步化異步代碼流的能力。

實(shí)現(xiàn)原理

核心思想是創(chuàng)建一個(gè) Promise，它只有在用戶按下我們期望的鍵時(shí)才會(huì)被解析（resolve）。在 Promise 被解析之前，任何 await 它的代碼都將暫停執(zhí)行。

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

class KeyPressWaiter {
    /**
     * 等待特定按鍵被按下。
     * @param {string} targetKey - 目標(biāo)按鍵，例如 'z'。
     * @returns {Promise<void>} 一個(gè)在目標(biāo)按鍵按下時(shí)解析的 Promise。
     */
    async waitForKeyPress(targetKey = 'z') {
        return new Promise((resolve) => {
            const listener = (e) => {
                // 只有當(dāng)目標(biāo)按鍵被按下時(shí)才執(zhí)行操作
                if (e.key === targetKey) {
                    // 移除事件監(jiān)聽(tīng)器以防止重復(fù)觸發(fā)和內(nèi)存泄漏
                    window.removeEventListener("keydown", listener);
                    resolve(); // 解析 Promise，允許 await 繼續(xù)執(zhí)行
                }
                // 如果按下的不是目標(biāo)按鍵，則不執(zhí)行任何操作，監(jiān)聽(tīng)器繼續(xù)等待
            };
            // 將事件監(jiān)聽(tīng)器添加到全局 window 對(duì)象
            window.addEventListener("keydown", listener);
        });
    }

    /**
     * 執(zhí)行一些操作，但在開(kāi)始前等待特定按鍵。
     */
    async doStuffAfterKey() {
        console.log(`等待按鍵 'z' 被按下...`);
        await this.waitForKeyPress('z'); // 暫停執(zhí)行直到 'z' 鍵按下
        console.log("按鍵 'z' 已按下，繼續(xù)執(zhí)行后續(xù)操作！");
        // 這里可以放置按鍵按下后需要執(zhí)行的業(yè)務(wù)邏輯
    }
}

// 實(shí)例化并啟動(dòng)流程
const waiterInstance = new KeyPressWaiter();
waiterInstance.doStuffAfterKey();

代碼解析與注意事項(xiàng)

1. waitForKeyPress() 方法：
   • 它返回一個(gè) Promise。這個(gè) Promise 的 resolve 函數(shù)被捕獲在 listener 內(nèi)部。
   • listener 函數(shù)：這是一個(gè)事件處理函數(shù)，當(dāng) keydown 事件發(fā)生時(shí)被調(diào)用。
   • if (e.key === targetKey)：這是關(guān)鍵的判斷條件。只有當(dāng)按下的鍵與我們預(yù)期的 targetKey 相符時(shí)，才執(zhí)行后續(xù)操作。
   • window.removeEventListener("keydown", listener)：至關(guān)重要。一旦目標(biāo)按鍵被按下且 Promise 被解析，必須立即移除事件監(jiān)聽(tīng)器。否則，該監(jiān)聽(tīng)器將持續(xù)存在，可能導(dǎo)致不必要的資源消耗和邏輯錯(cuò)誤（例如，即使操作已完成，按鍵仍會(huì)觸發(fā)已移除的邏輯）。
   • resolve()：當(dāng)條件滿足時(shí)調(diào)用 resolve()，通知 await 表達(dá)式可以繼續(xù)執(zhí)行。
2. doStuffAfterKey() 方法：
   • 它是一個(gè) async 函數(shù)，允許內(nèi)部使用 await。
   • await this.waitForKeyPress('z')：這行代碼會(huì)使 doStuffAfterKey 的執(zhí)行在此處暫停，直到 waitForKeyPress 返回的 Promise 被解析。
3. window 與 document.body：通常，對(duì)于全局的按鍵事件，將監(jiān)聽(tīng)器添加到 window 對(duì)象上是更穩(wěn)健的做法，因?yàn)?document.body 可能在某些情況下無(wú)法捕獲所有按鍵事件（例如，當(dāng)焦點(diǎn)不在文檔體上時(shí)）。

2. 基于構(gòu)造函數(shù)和直接事件處理的替代方案

如果你的需求不是在異步流中“等待”，而是當(dāng)特定按鍵按下時(shí)“觸發(fā)”一次性操作，那么可以考慮在類構(gòu)造函數(shù)中直接綁定事件監(jiān)聽(tīng)器，并在事件觸發(fā)時(shí)執(zhí)行邏輯并移除監(jiān)聽(tīng)器。

一鍵摳圖

在線一鍵摳圖換背景

30

查看詳情

實(shí)現(xiàn)原理

這種方法將事件監(jiān)聽(tīng)器的設(shè)置和事件處理邏輯緊密結(jié)合。當(dāng)類實(shí)例被創(chuàng)建時(shí)，監(jiān)聽(tīng)器就被激活。當(dāng)目標(biāo)按鍵按下時(shí)，執(zhí)行預(yù)定操作，然后立即解除監(jiān)聽(tīng)。

class DirectKeyPressHandler {
    constructor() {
        // 關(guān)鍵：綁定 doStuff 方法的 this 上下文
        // 確保當(dāng) doStuff 作為事件處理函數(shù)被調(diào)用時(shí)，this 仍然指向 DirectKeyPressHandler 實(shí)例
        this.doStuff = this.doStuff.bind(this);

        // 在構(gòu)造函數(shù)中添加事件監(jiān)聽(tīng)器
        window.addEventListener("keydown", this.doStuff);
        console.log("DirectKeyPressHandler 已初始化，等待按鍵 'z'...");
    }

    /**
     * 作為按鍵事件處理函數(shù)，當(dāng) 'z' 鍵按下時(shí)執(zhí)行。
     * @param {KeyboardEvent} e - 鍵盤事件對(duì)象。
     */
    doStuff(e) {
        // 如果按下的不是目標(biāo)按鍵，則直接返回，不執(zhí)行后續(xù)邏輯
        if (e.key !== 'z') {
            return;
        }

        // 目標(biāo)按鍵 'z' 已按下
        window.removeEventListener("keydown", this.doStuff); // 移除監(jiān)聽(tīng)器
        console.log("按鍵 'z' 已按下，執(zhí)行一次性操作！");
        // 這里放置按鍵按下后需要執(zhí)行的業(yè)務(wù)邏輯
    }
}

// 實(shí)例化后，監(jiān)聽(tīng)器立即激活
const handlerInstance = new DirectKeyPressHandler();
// 此時(shí)，程序不會(huì)“暫?！?，而是等待 'z' 鍵的事件觸發(fā)

代碼解析與注意事項(xiàng)

1. constructor() 方法：
   • this.doStuff = this.doStuff.bind(this)：這是此方法中的一個(gè)關(guān)鍵點(diǎn)。當(dāng)一個(gè)類方法作為事件處理函數(shù)被傳遞時(shí)，它內(nèi)部的 this 默認(rèn)會(huì)指向觸發(fā)事件的元素（通常是 window 或 document），而不是類的實(shí)例。通過(guò) bind(this)，我們強(qiáng)制 doStuff 方法中的 this 始終指向 DirectKeyPressHandler 的實(shí)例。
   • window.addEventListener("keydown", this.doStuff)：在構(gòu)造函數(shù)中注冊(cè)事件監(jiān)聽(tīng)器，使其在對(duì)象創(chuàng)建時(shí)就生效。
2. doStuff(e) 方法：
   • 它直接作為 keydown 事件的處理函數(shù)。
   • if (e.key !== 'z') return;：同樣，只對(duì)目標(biāo)按鍵做出響應(yīng)。
   • window.removeEventListener("keydown", this.doStuff)：一旦目標(biāo)按鍵按下并執(zhí)行了邏輯，立即移除監(jiān)聽(tīng)器。注意，這里移除的必須是同一個(gè)函數(shù)引用，因此在 addEventListener 時(shí)傳遞 this.doStuff（已綁定）是正確的。
3. 適用場(chǎng)景：這種方法更適合于“當(dāng)事件發(fā)生時(shí)執(zhí)行某個(gè)操作”的場(chǎng)景，而不是“等待事件發(fā)生然后繼續(xù)異步流程”的場(chǎng)景。它不涉及 Promise 或 async/await，因此流程上沒(méi)有顯式的“暫停”。

3. 總結(jié)與最佳實(shí)踐

在 JavaScript 類中實(shí)現(xiàn)等待特定按鍵按下有兩種主要策略，各有其適用場(chǎng)景：

• Promise 和 async/await 方案：
  • 優(yōu)點(diǎn)：代碼流程清晰，易于理解異步操作的順序，適合于需要“暫停”整個(gè)異步序列直到事件發(fā)生的情況。
  • 缺點(diǎn)：對(duì)于簡(jiǎn)單的單次觸發(fā)可能略顯繁瑣。
  • 適用場(chǎng)景：游戲開(kāi)發(fā)中等待玩家輸入、引導(dǎo)流程中等待用戶確認(rèn)、動(dòng)畫(huà)序列中等待用戶交互等。
• 直接事件處理方案：
  • 優(yōu)點(diǎn)：實(shí)現(xiàn)相對(duì)簡(jiǎn)潔，直接響應(yīng)事件，沒(méi)有 Promise 的額外開(kāi)銷。
  • 缺點(diǎn)：需要特別注意 this 上下文的綁定問(wèn)題，不適合需要異步鏈?zhǔn)秸{(diào)用的復(fù)雜場(chǎng)景。
  • 適用場(chǎng)景：一次性事件觸發(fā)、簡(jiǎn)單的用戶交互反饋、全局快捷鍵處理等。

共同的最佳實(shí)踐：

1. 及時(shí)移除事件監(jiān)聽(tīng)器：無(wú)論是哪種方案，一旦事件處理完成或不再需要監(jiān)聽(tīng)，務(wù)必使用 removeEventListener 移除監(jiān)聽(tīng)器。這是防止內(nèi)存泄漏和避免不必要行為的關(guān)鍵。
2. this 上下文管理：當(dāng)類方法作為回調(diào)函數(shù)傳遞時(shí)，始終注意 this 的指向問(wèn)題。使用 bind()、箭頭函數(shù)或在調(diào)用時(shí)使用 .call()/.apply() 是常見(jiàn)的解決方案。
3. 事件作用域：根據(jù)需求選擇合適的事件監(jiān)聽(tīng)對(duì)象（window、document、特定 DOM 元素）。對(duì)于全局按鍵事件，window 通常是最佳選擇。
4. 用戶反饋：在等待用戶輸入時(shí)，考慮提供視覺(jué)或文字提示，以改善用戶體驗(yàn)。

選擇哪種方法取決于你的具體需求和代碼的整體架構(gòu)。理解它們的工作原理和注意事項(xiàng)，將幫助你編寫(xiě)出更健壯、可維護(hù)的 JavaScript 代碼。

以上就是JavaScript 類中異步等待特定按鍵事件的實(shí)現(xiàn)策略的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！