New Event Modifier for async Listeners

[fjahn]

While trying out a couple of things, I noticed that there is a requent problem when having click listeners that are async.

Here are a couple of examples:

• There is a button that fetches data from a server. While the data is fetched, the button should not be clickable again.
• There is a button that triggers openning a modal that prompts the user to respond. While the modal is visible, the button should not be clickable. (Usually, the modal would overlay the button anyway, but in some cases you might not want that.)
• There is a game of memory cards. If two cards have been pressed, there is a delay of a few seconds before the cards are either hidden again or removed from the game. During the delay, the memory cards should not be clickable.

Traditional solution

In all these cases, developers would need to implement a flag for detecting if the event handler is currently running. The flag would have to be checked at the top of the event listener, then set, and then reset again at the end of the function in a finally block.

Using vanilla javascript, I have separated this functionality like this before:

addEventListenerWhileDisabled(button, 'click', fetchData)
// While fetchData is running, the button is disabled

async function fetchData() {
  // ...
}

function addEventListenerWhileDisabled (element, eventType, listener) {
  element.addEventListener(eventType, async (sender, e) => {
    disable(element)
    try {
      let response = listener(sender, e)
      if (response instanceof Promise) {
        response = await response
      }
      return response
    } finally {
      enable(element)
    }
  })
}

When listening to events via Alpinejs, this is not possible, however.

New solution

This functionality could also be realized using a new event modifier. Using my first example with the button:

<button @click.nonconcurrent="fetchData()">Fetch data</button>
<script>
async function fetchData() {
  // ...
}
</script>

While fetchData has not fulfiled or rejected the promise, clicking the button does not execute the listener.

Handling one listener for multiple elements

To make the modifier more versatile, there should be two variations of this modifier that are relevant when one handler is used for multiple buttons: If another button is clicked that would trigger a listener that is already executing, should the listener be called or not? In other words, should the non-concurrency be bound per listener or per button?

For instance, in my third example with the memory cards, we would like it to be bound to the listener, not the button. There are use cases where it should be the other way around.

Things to discuss

• What would be an appropriate name for these modifier(s)?
• How would developers be able to e.g. add a .disabled class to the element while the listener is running?
• This is currently very much designed for click listeners on buttons. Are there other, similar use cases for this? Could the modifier be adapted to also suit those use cases?

[SimoTod]

It's currently possible with something like that: https://codepen.io/SimoTod/pen/MWEmWJR

[fjahn]

Well yes, this suggestion would not enable something that was impossible before, but it could make a common pattern more expressive and less error prone.