Почему clearTimeout не сбрасывает таймер?

Объясните пожалуйста, почему таймер не сбрасывается?
Суть в том что при клике на левую или правую часть экрана проигрывается анимация, и чтобы на одну и ту же сторону можно было кликнуть дважды, нужно сбрасывать свойство animation-name, однако если до конца анимации кликнуть на другую сторону второй раз, таймер не сбрасывается и анимация прерывается по первому таймеру, а не по своему.
Надеюсь понятно изложил проблему.
Пробовал запихнуть clearTimeout(timerId); в animationRemove перед тайм-аутом, но тоже безуспешно.
let timerId = null;

    function animationRemove() {
        timerId = window.setTimeout(() => {
            bottleAnimation.style.animationName="none";
            whiskeyAnimation.style.animationName="none";
        }, 2000);
       
    }
    
    function leftClick() {
        bottleAnimation.style.animationName="left-bottle";
        whiskeyAnimation.style.animationName="left-click";
        window.clearTimeout(timerId);
        animationRemove();
    }
    function rightClick() {
        bottleAnimation.style.animationName="right-bottle";
        whiskeyAnimation.style.animationName="right-click";
        window.clearTimeout(timerId);
        animationRemove();
    }
  • Вопрос задан
  • 274 просмотра
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
Вы здесь в вопросе не указали, но в демке на jsfiddle видно, что этот ваш let timerId находится внутри mousemove
При движении мыши mousemove срабатывает очень много раз, и при каждом срабатывании заново создается переменная timerId и пересоздаются обработчики клика.
Короче - архитектура ни к черту :)
Создайте ОДНУ переменную let timerId, повесьте ОДИН обработчик клика, и уже после клика определяйте левый он или правый.

И на будущее - вместо onload и onclick лучше использовать addEventLitener('click', ...)
Да, писанины чуть больше, но при попытке написать еще один onload он у вас перетрет предыдущий, а addEventListener можно навесить много раз.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы