JS. Как правильно синхронизировать события?

Question

[trydim]

Здравствуйте, уважаемые!

Нуждаюсь в синхронизации событий.

/* кусок который не доступен для изменения (условно) */
const btnNode = document.querySelector('#btn');

const mainFunc = () => {
  // событие
}

btnNode.addEventListener('click', mainFunc);

/* кусок который не доступен для изменения (условно) */

const priorityFunc = async () => {
  const a = await new Promise(res => res(true));
  // приоритетное событие
}

btnNode.addEventListener('click', priorityFunc);

/* последняя */
const lastFunc = () => {
  // событие добавленное через какое-то время
}

btnNode.addEventListener('click', lastFunc);

Как сделать:
1) Хотелось бы добавить свою функцию-событие (priorityFunc), которая будет выполняться всегда первая и другие не запустятся пока она полностью не завершится. (со вторым справлюсь сам.)

2) а также знать как сделать так, что бы функция (priorityFunc) всегда выполнялась последняя, даже если кто-то потом допишет lastFunc (хотя он тоже может захотеть что бы его событие было всегда последним).
Тут можно, наверное, использовать setTimeout(), но сколько ставить задержку, что бы пользователь не думал что сайт тормозит.

В общем как правильно синхронизировать события и расставлять приоритеты?

Спасибо за внимание.

Comments

[Сергей Соколов]

хотя вопрос сам по себе интересный, его возникновение на практике вероятно указывает на неудачное проектирование

[trydim]

Изобретаю велосипед.

В данный момент идея такая:
При нажатии на кнопку происходит отправка отчета для формирования PDF.
из условия (которое я сам себе придумал и хочу это условие сохранить) менять порядок добавления события и изменять функцию (mainFunc) отправки отчета нельзя.

вот и думаю как добавить priorityFunc что бы подкорректировать отчет перед отправкой, но коррекция требуется только перед отправкой, условно report.printed = false, в момент формирования pdf меняю на true, именно в момент т.к. в самом pdf эта информация нужна, при любом изменении report свойство report.printed = опять false.

Свойство только что выдумано printed, на самом деле надо добавлять и корректировать кучу информации о текущем состоянии приложения в момент отправки отчета.

ps. А еще хотелось бы, что бы вообще не знать заранее как функция mainFunc называется и что там да как внутри происходит, достаточно знать что есть какой-то объект report )

Answer 1

[Сергей Соколов]

1. Т.к. известен 1-й обработчик клика, его можно снять: removeEventListener('click', mainFunc);
   
2. Повесить свой обработчик, в котором mainFunc и прочие вызывать только после отработки асинхронного кода.
   
3. Переопределить метод addEventListener() на этой кнопке, чтобы все последующие обработчики складывать в массив. И вызывать их из массива только после своего и mainFunc.
   

Comments

[trydim]

>>> Т.к. известен 1-й обработчик клика, его м

а если не известен?

есть такая идея:
Тут

насколько это плохо?

[Сергей Соколов]

trydim, если неизвестен, придётся рисовать копию кнопки поверх оригинала, и на неё вешать своих слушателей и вызывать click по невидимой исходной кнопке в нужный момент.

[trydim]

Сергей Соколов, да, еще через всплытие...

спасибо.

[Сергей Соколов]

trydim, всплытие не предотвратит мгновенное срабатывание исходного слушателя.

Answer 2

[Надим]

1. Допишите в конце первого события, чтобы по выполнению запускал все остальные
2. Используйте промисы, а конкретно вам поможет Promise.all() - при помощи нее можно сделать так, чтобы нужное событие стартовало последним, только после завершения всех других событий

Answer 3

[WbICHA]

Если по какой-то причине вышеперечисленные варианты не подходят, то остаётся только одно:

btnNode.addEventListener('click', priorityFunc, true);
                                                ^^^^