Managing simultaneous tasks with multiple event handlers for a single event

Question

Managing simultaneous tasks with multiple event handlers for a single event

Within the realm of HTML, you may encounter an

<input type="file">

element that can be linked to one or more event handlers. However, if one event handler includes asynchronous code, it will pause at that point and move on to the next event handler.

For instance, consider using window.createImageBitmap: https://jsfiddle.net/mxpy5qbw/1/

If the method window.createImageBitmap had a synchronous version, this issue could be resolved.

I am seeking a solution to ensure that the first event handler (such as onChangeEvent in the JSFiddle example) does not finish executing until all tasks are completed before moving on to the next event handler.

Furthermore, keep in mind that onChangeEvent (as shown in the example) is a custom event handler, while other event handlers may originate from sources beyond my control.

javascript asynchronous event-handling

Answer 1

Answer №1

const fileInput = document.getElementById('fileInput');

const eventHandlers = [];

const handleChangeEvent = async (event) => {
  let imageBitmap;

  try {
    imageBitmap = await window.createImageBitmap(event.target.files[0]);
  } catch (error) {
    console.error('handleChangeEvent', error);
  }

  console.log('handleChangeEvent', event, imageBitmap);
};

fileInput.addEventListener('change', async (e) => {
        await eventHandlers.reduce(async (promise, handler) => {
        await promise;
      return handler(e);
    }, Promise.resolve());
}, { capture: true });

eventHandlers.push(handleChangeEvent);

const handleNextChangeEvent = (event) => {
  console.log('handleNextChangeEvent', event);
};

eventHandlers.push(handleNextChangeEvent)

<input type="file" id="fileInput">

You can create a list of event handlers and connect a shared function to execute the list of asynchronous functions sequentially using the array reduce method along with async/await. Please refer to the provided code snippet for more details.

Answer 2

const fileInput = document.getElementById('fileInput');

const eventHandlers = [];

const handleChangeEvent = async (event) => {
  let imageBitmap;

  try {
    imageBitmap = await window.createImageBitmap(event.target.files[0]);
  } catch (error) {
    console.error('handleChangeEvent', error);
  }

  console.log('handleChangeEvent', event, imageBitmap);
};

fileInput.addEventListener('change', async (e) => {
        await eventHandlers.reduce(async (promise, handler) => {
        await promise;
      return handler(e);
    }, Promise.resolve());
}, { capture: true });

eventHandlers.push(handleChangeEvent);

const handleNextChangeEvent = (event) => {
  console.log('handleNextChangeEvent', event);
};

eventHandlers.push(handleNextChangeEvent)

<input type="file" id="fileInput">

You can create a list of event handlers and connect a shared function to execute the list of asynchronous functions sequentially using the array reduce method along with async/await. Please refer to the provided code snippet for more details.

Answer 3

Answer №2

To solve the issue, it's best to prevent event propagation, save event information, perform your task, and trigger the same event on the original target element. Remember to bypass your own event handler to prevent an endless cycle. All the necessary details can be found in this informative article:

Answer 4

To solve the issue, it's best to prevent event propagation, save event information, perform your task, and trigger the same event on the original target element. Remember to bypass your own event handler to prevent an endless cycle. All the necessary details can be found in this informative article:

Managing simultaneous tasks with multiple event handlers for a single event

Answer №1

Answer №2

Similar questions

Angular Fire: The $on method is missing and causing an error stating that undefined is not a function

Text about the three.js orthographic camera: "Exploring the

An analysis of Universal Angular.io and Prerender.io from the viewpoint of Googlebot

Encountering an issue while attempting to fetch a value from a nested object property with VueJS Interpolation

Guide to importing an npm package into a client-side file

finding the relative path based on a given URL

What is the best way to retrieve the data from this date object?

Retrieve libraries from package-lock.json file

The integration of query, URL, and body parameters is not working as expected in Seneca when using Seneca

Is there a way to incorporate an animated element within the track of my circular progress bar?

Using React client to accept messages from a Socket.io server: A guide

Ways to handle Sessions in Node.js

JS similar to yield*: async generator

Does the first Ajax call always finish first in the order of Ajax calls?

Text displaying as actionable icons

Creating a Clickable SVG Element in React

ReactJS: Want to update card design by utilizing the onClick event handler

What is the best way to trigger a controller action when the datepicker's value changes?

transmitting comfort through events

What is the best way to prioritize a non-submit button over a submit button in material-ui?