javascript - 等待并停止执行代码，直到事件处理程序触发

Question

我有启动一系列我可能不会更改的功能的代码:

doFirstThing();
doSecondThing();
doThirdThing();
// more functions...

每个函数都会创建一个事件处理程序。我想让函数做的是等到事件处理程序触发，然后才返回并让下一个函数执行。我不能让第一个函数的事件监听器自己执行 doSecondThing()(第二个执行第三个等等)，因为每次执行的函数的顺序和数量都不一样.

我能想到的唯一解决方案是事件监听器将像 eventFired 这样的 bool 值更改为 true，而函数中有一个无限循环检查并等待 bool 值变为 true。

例如，假设有一个函数 newText(str) 会更改按钮的文本，然后等待按钮被单击。完成后，该函数最终返回。以未知值执行此函数未知次数的代码是自动生成的，并且每次都不同，例如:

newText('Fizz');
newText('Buzz');
// some random code
newText('Foo');
// more code
newText('Bar');

所以预期的行为是有一个带有文本“Fizz”的按钮。单击后，文本将变为“Buzz”，依此类推，直到单击“Bar”。四个函数调用之间可能还有一些其他代码，所以我认为不可能只让第一个函数创建一个事件处理程序，该事件处理程序在触发时调用下一个，依此类推。

我相信这会占用大量资源，我可以使用 setTimeout() 每秒检查几次，但我觉得有更好、更干净、更有效的方法来做我找不到的事。或者这是解决此类问题的唯一且最好的方法？

Answer 1

您需要等待按钮被点击。为此，您需要将点击事件转换为一个 promise，该 promise 会在用户点击按钮时解析:

const once = (selector, event) => new Promise( 
    res => document.querySelector(selector).addEventListener(event, res));

const setText = (selector, text) => { 
    document.querySelector(selector).textContent = text
};

现在很容易做你想做的事:

(async function(){
  setText("#btn", "click me");
  await once("#btn", "click");
  setText("#btn", "again please");
  await once("#btn", "click");
  setText("#btn", "done!");
})();