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

Question

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

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

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

目前，我使用以下方法:

1. 声明一个全局变量updated并使其为false;
2. 在第一个表收到输入后，我创建了一个空的 while 循环，直到 updated 为 true；
3. 添加一个监听器，一旦计算完成并收到事件，将 updated 设置为 true。

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

感谢您的任何意见!

Answer 1

在 2022 年，拥有一个触发 Promise 的事件监听器(可用于 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>