Не работает очистка clearTimeout?

Question

[Артем]

Что-то делаю не так. Очистка clearTimeout не работает когда срабатывает повторно mouseleave, а clearTimeout не успел сработать (его надо очистить - перезаписать).
2 секунды = продолжительность анимации
функция и переменные

var count = 0;
var reset = 0;


function countLoop(){
  if(count >= 2000){
    count = 0;
  }else{
    count += 100;
  }
  console.log(count);
}

Два события

$(".boy-block").mouseover(function(){

    clearTimeout(reset);
    idInterval = setInterval(countLoop,100); 
    
    $(".circle-inner").addClass("active");

});

$(".boy-block").mouseleave(function(){
      clearInterval(idInterval);
      reset =  setTimeout( '$(".circle-inner").removeClass("active")', 2000 - count);
      count = 0;
});

Answer 1

[Stalker_RED]

Объявите idInterval за пределами анонимных функций, там-же, где var count = 0;

Answer 2

[maximw]

Переменная reset должна быть видимой в обеих функциях.

Не очень красиво, но должно работать

var reset;

$(".boy-block").mouseover(function(){

    clearTimeout(reset);
    idInterval = setInterval(countLoop,100); 
    
    $(".circle-inner").addClass("active");

});

$(".boy-block").mouseleave(function(){
      clearInterval(idInterval);
      reset =  setTimeout( '$(".circle-inner").removeClass("active")', 2000 - count);
      count = 0;
});

Answer 3

[Артем]

и reset и idInterval объявил глобально (дело не в этом). ClearTimeout все таки работает я думаю. Мне кажется проблем в том, что count обнуляется и потом по новой, а анимация все равно идет (2sec), не могу сообразить как сделать.