JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<button id="btn">click me</button>
<output></output>

JavaScript

/**
 * для вопроса https://qna.habr.com/q/954973
 * JS. Как правильно синхронизировать события?
 */

/* кусок который не доступен для изменения (условно) */
const btnNode = document.querySelector('#btn');
const mainFunc = () => {
  out('main handler');
}
btnNode.addEventListener('click', mainFunc);
/* конец куска, который не доступен для изменения (условно) */

const output = document.querySelector('output');
const out = (msg) => output.innerText += '\n' + msg;

// убрать первоначальный обработчик
btnNode.removeEventListener('click', mainFunc);

const priorityFunc = async () => {
  const a = await new Promise(res => setTimeout(() => res(true), 500));
  out("Priority done");
  mainFunc(); // первоначальный обработчик
  afterCall(); // добавленные после
}
btnNode.addEventListener('click', priorityFunc);

// Последующие обработчики сохранить в массив
const afterFunctions = []; // массив для функций
const afterCall = () => afterFunctions.forEach(f => f.call(btnNode));
btnNode.addEventListener = (name, handler) => afterFunctions.push(handler);

/* последняя */
const lastFunc = () => {
  out("Late call");
}
btnNode.addEventListener('click', lastFunc);