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

Question

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

1. 一节(表A)取决于另一节(表B);
2. 另一部分(表B)具有需要在每次更新时重新计算的元素.计算由外部工具处理,并在完成时导致事件.

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

目前,我使用以下方法:

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>

Answer 2

添加一个监听器,一旦完成计算并收到事件,将更新设置为true.

而不是设置updated为true,然后等待updated成为真 - 只要在听众中做任何你想做的事情.

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

Answer 3

做空循环是一个坏主意.您不仅可以刻录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
}