clearInterval on 'mouseleave'-CodePudding

I'm creating a visual counter in my html using Javascript. At first the counter is '0'. On mouseenter it starts counting till 10 (adding 1 every second), and on moueseleave it should reset to 0 again and stop counting, however, when I move the cursor away it only shortly resets to 0, and then keeps counting up to 10 again, starting from the number it stopped at during the mouseleave.

My code looks like this:

let timer = ''

box[4]?.addEventListener('mouseenter', () => {
    let sec = 0
    let timer = setInterval(() => {
        box[4].innerHTML = String(1   sec)
        sec  
        if(sec === 10){
            clearInterval(timer);
        }       
    }, 1000)   
})  

box[4]?.addEventListener('mouseleave', () => {
    clearInterval(timer)
    box[4].innerHTML = String(0) 
})

How can I improve it so that on mouseleave the counter becomes 0 again and stops any counting?

CodePudding user response：

You need to remove the let on let timer inside the mouseenter callback:

let timer = ''

box[4]?.addEventListener('mouseenter', () => {
    let sec = 0
    timer = setInterval(() => {
        box[4].innerHTML = String(1   sec)
        sec  
        if(sec === 10){
            clearInterval(timer);
        }       
    }, 1000)   
})  

box[4]?.addEventListener('mouseleave', () => {
    clearInterval(timer)
    box[4].innerHTML = String(0) 
})

The reason is that when you do let timer you are actually populating a new local var called timer and the other var at the top of the code will not be populated. That means your clearInterval inside of the mouseleave handler was not actually canceling anything.

CodePudding user response：

 let timer = setInterval(() => {
        box[4].innerHTML = String(1   sec)
        sec  
        if(sec === 10){
            clearInterval(timer);
        }       
    }, 1000)

On this part of the code you are setting up timer again and again. If you delete the keyword let it will work perfecly.

CodePudding user response：

This isn't exactly what you asked but it may be useful in some cases, at least, to know that you can do all of this in the one listener. Whether it is best for your specific case, I don't know; but have used the pattern often for drag events. It keeps the two events in the same scope and the mouseleave event "active" only after a mouseenter event and removes it immediately afterward.

let box4 = document.querySelector('.box4');

box4.addEventListener('mouseenter', () => {
    let sec = 0;
    let timer = setInterval(() => {
        box4.innerHTML = String(1   sec)
        sec  
        if(sec === 10){
            clearInterval(timer);
        }       
    }, 1000)   

  box4.addEventListener('mouseleave', clearBox4);
  
  function clearBox4 () {
    clearInterval(timer);
    box4.removeEventListener('mouseleave',clearBox4);    
    box4.innerHTML = String(0);
    console.log('Removed listener mouseenter on box4 at '   sec   ' seconds.');
  }
})

.box4 {
 width: 100px;
 height: 100px;
 background-color: blue;
 font-size: 30px;
 color: white;
 padding-top: 15px;
 text-align: center;
 }

<div ></div>