0

Есть необходимость выполнить функцию, после выполнения первой функции, но когда первая будет завершена(и будет ли), отследить сложно. Приведу простой пример что б объяснить сумбур вопроса.

/// WE CAN'T change this elements
const btn = document.getElementById("btn_push");
let sendData = (timeFunc) => { console.log(`Function DONE! It took ${timeFunc} sec`)};
let randomInteger = (min, max) => {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}
btn.addEventListener("click", function(){
  const time = randomInteger(1000, 4000);
  setTimeout(sendData(time), time); 
});

/// OWN elements


let secondFunction = () => { console.log(`This function done after server get data`)};

Предположим имеется функция отправляющая данные на сервер sendData() по нажатию на кнопку. Сколько она будет выполняться (проводить валидации, общаться с другими API и тд.) нам не известно. Нам известно только её название, и то, что выполнение повешено на клик. Вопрос, как выполнить secondFunction() по завершению выполнения первой функции? *Вторая функция может вызываться совершенно с другого js файла этого же html документа. Возможно ли это как-то отловить, что она завершила действие?

PS Если б это всё было в одном js и можно б было переписать вызов первой функции, то делалось бы через Promise, но этого нету.

3
  • Допустим: в HTML создаем элемент(любой, скрытый) и на него рядом со второй функцией вешам обработчик события(имя события мы можем придумать любое) - допустим 'onFncEnd'. Соответственно, когда первая завершена(ведь где то у нее есть конец), фукнция должна задиспейчить событие в элемент .dispatchEvent('onFncEnc'), а далее сработает слушатель и запустит вторую фукнцию. Подробнее про пользовательские события
    – SwaD
    23 янв в 13:08
  • так в том и вопрос, что б знать, что функция завершина? Как это отловить ? Можете показать на примере.. когда надо стартовать secondFunction() 23 янв в 13:40
  • Покажите реальную вашу фукнцию и можно будет сказать, где у нее конец. Вообще, фукнции заканчиваются, обычно, в конце кода. Если это промисы, то это последняя строка последнего .then() условно. Сложнее, если фукнция вызывает и не дожидается другие асинхронные фукнции.
    – SwaD
    23 янв в 13:43

2 ответа 2

0

Вы можете использовать метод setTimeout для запуска функции secondFunction после выполнения функции sendData. Вы можете передать функцию sendData в качестве аргумента в setTimeout, а затем в теле функции sendData вызвать secondFunction.

btn.addEventListener("click", function(){
  const time = randomInteger(1000, 4000);
  setTimeout(() => {
    sendData(time);
    secondFunction();
  }, time); 
});

Так же Вы можете использовать события, которые генерирует sendData(Event), и подписать secondFunction на это событие. Таким образом, secondFunction будет выполнятся только после того, как sendData генерирует событие.

document.addEventListener('sendDataEvent', secondFunction);
let sendData = (timeFunc) => { 
  console.log(`Function DONE! It took ${timeFunc} sec`);
  document.dispatchEvent(new Event('sendDataEvent'));
};
0

Почему бы не переписать функцию?

const oldFunc = btn.onclick;

btn.onclick = function(e) {
    const data = oldFunc(e);
    sencodFunction();
    return data;
    //или
    setTimeout(sencodFunction, 200)
    return oldFunc(e);
}
1
  • потому-что закрыт доступ к исправлению чужих ф-ций. Можно добавлять что-то новое, но не ломать контекст и порядок вывода. 30 янв в 15:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.