事件侦听器等待 action/callback

Question

是否可以像回调一样处理事件侦听器并等待其 action/return？

场景如下，我加载一个页面并调用 initialize()，它呈现一个 div 和一个按钮，但将其隐藏。然后我点击一个图标，然后显示 div 和按钮以使其可见。

当我调用 showDivAndButton 时，我正在等待有人单击呈现的按钮时的 Promise 或回调。在这种情况下，我正在等待“怎么了？”

initialize() {
  window.addEventListener('message', async (e) => { if(e.data === 'hello-world') { return "whats up?"; } });
  renderDivAndButton();
}

showDivAndButton() {
  divAndButton.setVisible(true);

  // wait for button to be pressed and return string
}

renderDivAndButton() {
  btn.onclick = { window.postMessage('hello-world', '*'); }
}

也许 async showDivAndButton(): Promise<string> {} ?

然后做类似 let res = await showDivAndButton();

的事情

但是没有意义

Answer 1

您绝对可以使用 async/await 编写一个函数来等待您发布的消息被触发（由按钮触发）。为此，您需要将事件侦听器包装在一个承诺中，如下所示：

async function waitForMessage() {
   return new Promise((accept, reject) => {
      const handler = (event: MessageEvent) => {
         if(event.data === 'hello-world') {
            /**
             * This try catch is important if your handler 
             * does something more complicated that might
             * throw an error. If you don't do this, your
             * awaiting function won't be able to catch that error
             */
            try {
               // More code
               accept("What's up?")
            } catch(error) {
               reject(error)
            }
         }
         window.removeEventListener('message', handler)
      }

      window.addEventListener('message', handler);
   });
}

现在可以完全按照您的预期等待此功能：

const message = await waitForMessage()
console.log(message) // "What's up?"

事件侦听器等待 action/callback

event listener wait for action/callback

callback

promise

typescript