Как приостановить обработку события JS?

Question

[Alex Krynytskyi]

Во время клика по кнопке включаю анимацию.
Как отключить обработчик событий пока анимация не дошла до конца. Что бы кнопка не включала анимацию заново ?
И потом снова можно было кликать и запускать

Answer 1

[Stalker_RED]

Если у вас css-анимация, то можно продолжить обработку после события animationend.
Если js-анимация - добавьте вызов callback'а в конце анимации.

Answer 2

[Somewhere Intech]

на клике записываете куда нибудь, хоть в саму кнопку, что анимация стартовала. При повторном клике проверяете свою запись и возвращаетесь если активна. По завершению анимации удаляете запись. Ну или, что логичнее, отключаете кнопку на время рендеринга анимации

function myAwesomeAnimation(){
     return new Promise( function(resolve, reject){
          // some code
          resolve(); //animation rendering complete
     })
}

document.querySelector('#myAwesomeAnimationStartButton')
     .addEventListener('click', function({ target }){
          if (target.dataset.animationRendering) return;
          target.dataset.animationRendering = target.disabled = true;
          myAwesomeAnimation().then( _ => target.dataset.animationRendering = target.disabled = false );
     })