多个onClick选择器如何按时工作？

Question

Currently, the code attaching the onClick events looks like this:

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

fetchDataFromDatabase() does some async work, but this is already taken care of by async/await and promises. executeReservation() shall ONLY start if fetchDataFromDatabase() has finished its execution.

Currently, everything is working. 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"?

I already learned that when you add multiple event handlers to an element via jquery (how about with native JS?), they fire in the order which you have determined in your code. But I dont know if this "rule" also encompasses that Event2 will only fire if Event1 has already finished execution?

And besides, does the following code the same as the code above (from a functional perspective)?

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

Answer 1

First thing's first: JS execution is single-threaded in nature. No matter how asynchronous your code appears to be, only one part of it is running at any given time. You can read up more about this here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Secondly, event listeners are triggered in a loop, in order of when they were attached. You can think of it sort of like this:

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"?

With the following test, you can observe how a while loop in the first event listener stops the second one from firing, hence confirming your suspicion. Note: I did not embed it as a snippet because snippets overriding of console somehow broke this example. Just paste it in your browser console.

// $(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'));

However...

If you are doing work asynchronously, things get much better.

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

With this example you can see that although the first event handler schedules a timer, this does not block the next event listeners from running. The same is true if you were to say, make an XHR request.

So finally , armed with this information, we can say that it is actually better to use a single event listener, like in your second snippet.