使用多个事件处理程序处理一个事件的异步执行

Question

有一个

<input type="file">

HTML 元素可能附加了 1 个或多个事件处理程序。但是，当 1 个事件处理程序包含异步代码时，它会在该代码处停止并转到下一个事件处理程序。

window.createImageBitmap

用法示例：https://jsfiddle.net/mxpy5qbw/1/

当方法

window.createImageBitmap

具有可以解决问题的同步版本时。

我正在寻找一种解决方案来处理它，第一个事件处理程序（在 JSFiddle 示例中

onChangeEvent

）在所有工作完成之前不会完成执行，然后转到下一个事件处理程序。

另外，注意

onChangeEvent

（来自示例）是自定义事件处理程序，但其他事件处理程序可能来自其他地方，不一定由我控制。

Answer 1

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

const handlers = [];

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

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

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

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

handlers.push(onChangeEvent);

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

handlers.push(onChangeEventNext)

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

您可以创建一个处理程序数组并附加一个公共处理程序，以使用数组reduce方法和async/await逐个执行异步函数数组。请参阅随附的片段。

Answer 2

最终的解决方案是停止传播，存储事件详细信息，执行任务，并在同一目标元素上分派相同的事件。考虑到这一点，您需要跳过自己的偶数处理程序以避免无限循环。所有详细信息均在以下文章中描述：

https://www.sitelint.com/blog/how-to-pause-and-resume-event-propagation-in-javascript/