"如何讓 JavaScript 等到某個事件發生？"

Question

我正在編寫具有以下結構的網頁：

1. 一個部分（表 A）依賴於另一部分（表 B）；<\/li>
2. 另一部分（表 B）包含需要在每次更新時重新計算的元素。 計算由外部工具處理，完成后將引發事件。<\/li><\/ol>

   為了保證正確性，只有在另一個表完全更新（即完成計算）之后才需要更新該表。 但是，我不知道如何有效地實現這一點，而且我在 JavaScript 中找不到任何wait<\/code>工具。

   目前，我正在使用以下方法：

   1. 聲明一個updated<\/code>的全局變量並將其false<\/code> ；<\/li>
   2. 在第一個表收到輸入后，我創建了一個空的while<\/code>循環，直到updated<\/code>為true<\/code> ；<\/li>
   3. 添加一個監聽器，一旦計算完成並接收到事件，設置updated<\/code>為true<\/code> 。<\/li><\/ol>

      這對我來說似乎不直觀，但我想不出任何其他方法。 有什么好的方法可以做到這一點嗎？

      感謝您的任何投入！

Answer 1

添加一個監聽器，一旦完成計算並收到事件，將更新設置為true。

相反的設置updated為true，然后等待updated是剛剛道道做任何你想做的聽眾做。

myEventBus.addListener(function () {
    // do whatever
    updateTable();
    alert('table updated!');
});

Answer 2

做空循環是一個壞主意。 您不僅可以刻錄CPU周期，而且Javacript是單線程的，因此您將永遠循環，而不會讓任何人有機會更改變量。

您可以做的是重寫具有其他人的表格，以“觸發事件本身”。 有很多方法可以做到這一點，但基本上你只是想讓它調用一個“延續”函數而不是盲目返回。這個函數可以預定義，或者你可以把它作為參數傳遞給某個地方。

//this is just illustrative
//Your actual code will be probably very different from this.

function update_part(){
    //do something
    signal_finished_part()
}

var parts_done = 0;
function signal_finished_part(){
    parts_done ++;
    if(parts_done >= 5){
        signal_all_parts_done();
    }
}

function signal_all_parts_done()
{
    //do something to table A
}

Answer 3

您可以為更新的任何觸發器編寫回調函數。 為了避免混亂的回調，您也可以使用promises，並根據更新操作中檢索的數據更新表的某些部分。 接受建議。

Answer 4

在 2022 年，擁有一個觸發 Promise（可用於 Promise 鏈或 async/await 代碼）的事件監聽器非常有用。 一種干凈的制作方法：

 function getPromiseFromEvent(item, event) { return new Promise((resolve) => { const listener = () => { item.removeEventListener(event, listener); resolve(); } item.addEventListener(event, listener); }) } async function waitForButtonClick() { const div = document.querySelector("div") const button = document.querySelector("button") div.innerText = "Waiting for you to press the button" await getPromiseFromEvent(button, "click") div.innerText = "The button was pressed!" } waitForButtonClick()

 <button>ClickMe</button> <div></div>