如何异步事件处理程序？等待承诺javascript

Question

document.querySelector('#library').addEventListener('click', function(event) {

  new Promise((resolve => {
    setTimeout(() => {
      resolve('set time out');
    }, 2000)
  })).then(console.log)

  // if response
  console.log('stop propagation')
  event.stopPropagation();
  event.preventDefault();
  // else
}, true)

我需要点击一个元素。这将发出请求并根据响应（return true 或 false），这将启用或禁用点击。但是 console.log('stop propagation') 在 .then(console.log).

之前执行

Answer 1

如果您想停止传播并防止默认，则不能等待异步操作完成。在这种情况下，您的 promise 根本不会停止代码，but even if you implement a "sleep" function properly（使用 async/await），它仍然需要等待 promise 解决，然后才能知道是否应该继续。 JavaScript 不会等待该答案，而是会执行默认操作并在您决定停止之前进一步传播。

如果你想推迟这个动作，你必须先防止默认和传播，然后等待承诺解决，然后如果答案是满意，继续做该做的事

document.querySelector('#library').addEventListener('click', async function(event) {
  console.log('stop propagation')
  event.stopPropagation();
  event.preventDefault();

  const returnValue = await new Promise((resolve => {
    setTimeout(() => {
      resolve('set time out');
    }, 2000)
  })).then(resolvedValue => {
    console.log(resolvedValue);
    return resolvedValue;
  })

  if (returnValue === 'set time out') {
    location.href = event.target.href;
  }
}, true)

<a id="library" href="http://www.google.com/">Click</a>

如何异步事件处理程序？等待承诺javascript

How to async an eventhandler? Wait for promise javascript

javascript

event-handling

mouseevent