Почему функция не отрабатывает сразу после вызова?

Question

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

P.S. проверял тем, что добавлял запрос в консоль внутри этих функций - в консоль запросы выводятся когда нужно, но анимация не работает.

P.P.S возможно, проблема в том, что на самом деле у меня не один обработчик, а много обработчиков кликов, вложенных один в другой (мой косяк, но не смог придумать, как сделать по-другому). И пока они все не отработают, анимация не загрузится. Может быть, можно второй раз повесить обработчик на ту же кнопку, но уже вначале, вне основного кода? И тогда анимация отработает сразу? Но тогда, получается, анимация не будет знать, когда ей останавливаться. Можно наверно включающую анимацию поместить отдельно, а выключающую - после выполнения кода...

const button = document.getElementById('button');
let counterTurg;

function downloadAnimIn(e) {
  if (counterTurg >= 1) {
    let loadingIn = () => {
      if (!document.querySelector('.downloader').classList.contains('active')) {
        document.querySelector('.downloader').classList.add('active');
      }
    };
    loadingIn();
    console.log(counterTurg);  //в консоле сведенья появляются сразу, 
                               //а анимация не работает
  }
};

function downloadAnimOut(e) {
  if (counterTurg >= 1) {
    let loadingOut = () => {
      if (document.querySelector('.downloader').classList.contains('active')) {
         document.querySelector('.downloader').classList.remove('active');
      }
    };
    loadingOut();
    console.log('====' + counterTurg);
  }
};

function buttonPush(e) {
  e.preventDefault();
  e.stopPropagation();
  
  downloadAnimIn(e);
  
  //код ....
  //код ....
  //код ....
  
  
  downloadAnimOut(e);

  counterTurg = 0;

  counterTurg++;
}

button.addEventListener('click, buttonPush);

.downloader {
  padding: 20px;
  background: red;
  display: none;
 }
 
 .active {
  display: block;
 }

<button type='button' id='button'>Button</button>
<div class='downloader'>Spinner</div>

Answer 1

Удалил свой первый ответ, так как он неправильный. Мой вопрос не имеет решения. Так как JavaScript - язык однопоточный (т.е. может выполняться только одна задача в один момент времени), невозможно одновременно запустить две функции - они все равно попадут в очередь стека вызовов - одна за одной. Подробнее: https://habr.com/ru/companies/hexlet/articles/656003/

UPD. Как и советовал CrazyElf, повесил на первый обработчик на этой кнопке таймер:

positBtn.addEventListener('click', function () { setTimeout(turgetCheck, 0) });

, и все заработало :))

БЛОГ НА HUSL

Почему функция не отрабатывает сразу после вызова?

Ответы (1 шт):