时间戳

首页 > 解决方案 > 如何异步事件处理程序？等待承诺 javascript

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

问题描述

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)

我需要单击一个元素。这将发出请求并根据响应（将返回true或false），这将启用或禁用点击。而是console.log('stop propagation')在之前被执行.then(console.log)。

标签： javascriptevent-handlingmouseevent

解决方案

如果要停止传播并阻止默认操作，则不能等待异步操作完成。在这种情况下，您的承诺根本不会停止代码，但即使您正确实现了“睡眠”功能（使用async/ await），它仍然需要等待承诺解决，然后才能知道它是否应该继续或不。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>

推荐阅读