如何在 JavaScript 中的按鈕上的事件處理程序上使用異步/等待？

Question

我也是新手 JavaScript 並且遇到異步問題。 我有一個帶有兩個按鈕的網頁，如果按下是按鈕，它將執行一些代碼，如果按下否按鈕，它將執行不同的代碼，但無論按下哪個按鈕，它都會在 function 中繼續運行。 例如

function mainloop(){

        document.getElementById("buttonyes").addEventListener("click", () => {
            /* do some code */
        })
        
        document.getElementById("buttonno").addEventListener("click", () => {
            /* do some different code */
        })
        /* wait for either button to be pressed and then continue with code */
        console.log("yay waiting for stuff")
}

我相信解決這個問題的方法是承諾並創建其他功能來處理按鈕； 但是，我看到的教程只顯示了一個 function 解決方案，如果我理解正確，激活時的 EventListener 正在使用另一個 function 。 我已經從 C 過來了，所有這些 object 屬性異步的東西都讓我陷入了循環。

我真的很想有一種方法把它全部放在同一個主 function 中，因為這個挑戰特別要求我在這個該死的按鈕上使用 async/await。

Answer 1

事件處理程序已經是使用異步代碼的一種方式。 處理程序中的代碼已經等待執行，直到有人按下按鈕。

如果您有一些 function 需要在兩次單擊后執行，您只需將其添加到兩個事件處理程序即可。 順便說一句，您不需要將addEventListener放入循環中。 只需添加一次。

    document.getElementById("buttonyes").addEventListener("click", () => {
        /* do some code */
      
        myNewFunction()
    })
    
    document.getElementById("buttonno").addEventListener("click", () => {
        /* do some different code */

        myNewFunction()
    })


    /* wait for either button to be pressed and then continue with code */
    function myNewFunction() {
         console.log("yay waiting for stuff")
    }

如果按鈕中的代碼執行了需要等待的操作，例如從 Internet 獲取數據，則您只需要另一個async await 。 否則我們需要更多的上下文來了解您為什么要通過額外的async await來解決這個問題。

Answer 2

我建議您使用帶有 promise 的異步等待來處理這種情況。 eventHandler 在后台支持異步等待。

請檢查這個例子： -

document.querySelector('#btn')
  .addEventListener('click', handleClick)

async function handleClick() {
  await new Promise((resolve) =>
                    setTimeout(resolve, 5000))
  alert('clicked')
}