主页 / 问题 / 1611039
Accepted
alexkolykhalov
Asked:2025-04-30 16:52:23 +0000 UTC2025-04-30 16:52:23 +0000 UTC

异步等待和调度事件

  • 772
button.addEventListener("click", function() {
  const ce = new CustomEvent(
    "board:select",
    { bubbles: false, cancelable: true, detail: {} }
  );

  const isCancelled = !document.querySelector(`#${Board.prefix}`)?.dispatchEvent(ce);

  console.log(isCancelled ? "is cancelled" : "is not cancelled");
}

//I вариант
document.querySelector(`#${Board.prefix}`)?.addEventListener("board:select", function() {
  event.preventDefault();
})

//II вариант
document.querySelector(`#${Board.prefix}`)?.addEventListener("board:select", async function() {
  const data = await fetch("http://localhost:4000/boards"); 
  event.preventDefault();
})

有一个简单的代码，当按下按钮时会发送一个事件。

问题：为什么第一个选项中 isCancelled 为真，而第二个选项中 isCancelled 为假。

我想等到 fetch 执行完毕然后设置 event.preventDefault();或不放。现在在第二个选项中 event.preventDefault();不起作用。

告诉我发生了什么事？

javascript

2 个回答

  1. Best Answer

    dispatchEvent是同步执行的，立即返回结果。

    async/await使函数异步- 并且此时函数返回值dispatchEvent- 该方法preventDefault尚未被调用，因此它被返回true

    • 2 
  2. const data = await fetch("http://localhost:4000/boards"); 
event.preventDefault();

    一旦事件发生，取消就太晚了。

    我想等到 fetch 执行完毕然后设置 event.preventDefault();或不放。

    由于事件是同步发送的，因此无法做到这一点。但是，在大多数情况下，如果需要，可以通过编程重复点击：

    var bypassClick = false

document.querySelector("a").addEventListener("click", async e => {
  if (bypassClick) return
  
  e.preventDefault()
  
  var a = e.target.closest("a")
  
  if (a.classList.contains("disabled")) return
  a.classList.add("disabled")

  try {
    if (await shouldBypassClick()) {
      bypassClick = true
      e.target.click()
      bypassClick = false
    } else {
      console.log("Prevented")
    }
  } finally {
    a.classList.remove("disabled")
  }
})

function shouldBypassClick() {
  return new Promise(resolve => setTimeout(resolve, 1000, Math.random() > .5))
}
    .disabled {
  opacity: .5;
  pointer-events: none;
}
    <a href="data:text/plain,Link%20clicked">Click me</a>

    • 0

相关问题