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

Question

[Collonil Tolli]

Объясните пожалуйста, почему таймер не сбрасывается?
Суть в том что при клике на левую или правую часть экрана проигрывается анимация, и чтобы на одну и ту же сторону можно было кликнуть дважды, нужно сбрасывать свойство 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();
    }

Comments

[Mikhail Osher]

демку на codesandbox можно?

[Collonil Tolli]

https://jsfiddle.net/CollonilTolli/x2vwsy3a/1/ картинки рандомные, но проблему отражает

[WbICHA]

Collonil Tolli, вешать новый обработчик в эвенте, да ещё и в onmousemove... И там же обсчитывать всё с нуля.

[Collonil Tolli]

WbICHA, справедливое замечание, но по сути производительность конкретно тут не самый важный аспект, да и в этом моменте работает корректно.

[WbICHA]

Collonil Tolli, как раз именно из-за этого момента и не работает.

Answer 1

[Stalker_RED]

Вы здесь в вопросе не указали, но в демке на jsfiddle видно, что этот ваш let timerId находится внутри mousemove
При движении мыши mousemove срабатывает очень много раз, и при каждом срабатывании заново создается переменная timerId и пересоздаются обработчики клика.
Короче - архитектура ни к черту :)
Создайте ОДНУ переменную let timerId, повесьте ОДИН обработчик клика, и уже после клика определяйте левый он или правый.

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