如何在沒有在執行程序函數中添加事件處理程序的情況下將 Promise 與“click”事件一起使用？

Question

編輯：試圖澄清問題並縮短它——我輸入了一些代碼來表明我曾試圖解決這個問題，但我認為它只會讓事情變得混亂。

我是 Promise 新手，我正在嘗試轉換一些現有代碼（這很簡單）以使用 Promise。

我想使用 promise 將按鈕點擊鏈接到我程序的其他部分，也就是說，我想將點擊視為異步事件（例如，類似於 ajax 調用）。 如何做到這一點？

從 MDN 文檔中，promise 基本上是這樣工作的

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

我完全理解這一點。 據我了解，以下內容會起作用

function myPromiseGenerator() {
  return new Promise((resolve, reject) => {
   this.myButton.addEventListener('click',function(e) {
    /// do something to process the answer
    resolve(something);
    }
  });
}

但是如何刪除事件偵聽器？ 我只想添加一次事件偵聽器，而不是在每次調用myPromiseGenerator但我不知道如何使其工作。

一般來說，做我想做的事情的最佳方法是什么？ 謝謝你的幫助。

Answer 1

只需使用事件偵聽器的once選項：

function myPromiseGenerator() {
  return new Promise((resolve, reject) => {
    this.myButton.addEventListener('click',function(e) {
        /// do something to process the answer
        resolve(something);
    }, {once: true});
  });
}

Answer 2

你可以做你最初打算做的 - 刪除事件監聽器 - 如果你給匿名處理函數一個名字：

async function myPromiseGenerator() {
    return new Promise(resolve => {
        this.myButton.addEventListener('click',
            async function handler(event) {
                this.myButton.removeEventListener('click', handler);
                // Assume a login code has been entered - validate it
                if (await validateAccessCode())
                    resolve(true)
                else
                    resolve(false);
            });
    });
}