javascript - 多个 onClick 选择器到底是如何按时间顺序工作的？

Question

目前，附加 onClick 事件的代码如下所示:

$("#LieblingsButton").click(function(){
    reactivateFavSeatCheck()
  })

  $("#LieblingsButton").click(function(){
    checkForWeekReservationByFavSeatButton()
  })

  $("#LieblingsButton").click(function(){
    fetchDataFromDatabase()
  })

  $("#LieblingsButton").click(function(){
    executeReservation()
  })

fetchDataFromDatabase() 做了一些异步工作，但这已经由 async/await 和 Promise 处理了。executeReservation()仅在 fetchDataFromDatabase() 完成执行后才开始。

目前，一切正常。但我担心情况可能只是这样，因为情况允许。如果 fetchDataFromDatabase() 花费了几毫秒“太长”怎么办？

我已经了解到，当您通过 jquery 将多个事件处理程序添加到一个元素时(使用 native JS 怎么样？)，它们会按照您在代码中确定的顺序触发。但我不知道这个“规则”是否也包含Event2仅在Event1已经完成执行时才会触发？

此外，下面的代码与上面的代码相同吗(从功能 Angular 来看)？

$("#LieblingsButton").click(function(){
    reactivateFavSeatCheck()
    checkForWeekReservationByFavSeatButton()
    fetchDataFromDatabase()
    executeReservation()
  })

Answer 1

首先:JS 执行本质上是单线程的。无论您的代码看起来多么异步，在任何给定时间都只有一部分在运行。您可以在这里阅读更多相关信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

其次，事件监听器按照附加的顺序循环触发。你可以这样想:

handlers.forEach((handler) => {
  try { handler(event); } catch (e) { /* put warning in console */ }
});

But I fear that this might only be the case because the cirumcstances allow for it. What if fetchDataFromDatabase() takes a few ms "too long"?

通过以下测试，您可以观察第一个事件监听器中的 while 循环如何阻止第二个事件监听器触发，从而证实您的怀疑。注意:我没有将其嵌入为片段，因为重写控制台的片段以某种方式破坏了这个示例。只需将其粘贴到浏览器控制台中即可。

// $(e).click(fn) roughly equals e.addEventListener('click', fn);

window.addEventListener('test', () => {
  console.log('first handler', new Date());
  const time = Date.now();
  while (Date.now() - time < 2000) {}
});

window.addEventListener('test', () => {
  console.log('second handler', new Date());
});

window.dispatchEvent(new Event('test'));

但是...

如果您异步工作，事情会变得更好。

window.addEventListener('test', () => {
  setTimeout(() => {
    console.log('first handler');
  }, 1000);
});

window.addEventListener('test', () => {
  console.log('second handler');
});

window.dispatchEvent(new Event('test'));

通过此示例，您可以看到，虽然第一个事件处理程序安排了一个计时器，但这不会阻止下一个事件监听器运行。如果您要说发出 XHR 请求，情况也是如此。

最后，有了这些信息，我们可以说使用单个事件监听器实际上更好，就像第二个片段中一样。