如何让JavaScript等到某个事件发生？

Question

我正在写一个具有以下结构的网页：

1. 一个部分（表A）依赖于另一个部分（表B）；
2. 另一部分（表 B）包含需要在每次更新时重新计算的元素。计算由外部工具处理，完成后会引发事件。

为了保证正确性，只有在其他表完全更新（即完成计算）后，才需要更新该表。但是，我不知道如何有效地实现这一点，而且我在 JavaScript 中找不到任何

wait

工具。

目前，我使用以下方法：

1. 声明一个全局变量

   updated

   并使之成为

   false

   ;
2. 在第一个表收到输入后，我做一个空的

   while

   循环直到

   updated

   是

   true

   ;
3. 添加一个侦听器，一旦计算完成并收到事件，将

   updated

   设置为

   true

   。

这对我来说似乎不直观，但我想不出任何其他方法。有什么好的方法吗？

感谢您的任何意见！

Answer 1

2022 年，拥有一个触发 Promise 的事件侦听器（可用于承诺链或异步/等待代码）会很有用。一种干净的制作方法：

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>

Answer 2

添加一个监听器，一旦计算完成并收到事件，设置更新为真。

与其将

updated

设置为真，然后等待

updated

为真，不如在监听器中做任何您想做的事。

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

Answer 3

做空的 while 循环是个坏主意。您不仅会消耗 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 4

您可以为触发更新的任何内容编写回调函数。为避免混乱的回调，您也可以使用 promises，并根据更新操作中检索到的数据更新部分表。接受建议。