\'mouseleave\' 上的 clearInterval

Question

我正在使用 Javascript 在我的 html 中创建一个可视计数器。起初计数器为“0”。在 mouseenter 上它开始计数到 ​​10（每秒加 +1），在 moueseleave 上它应该再次重置为 0 并停止计数，但是，当我将光标移开时它只会很快重置为 0，然后继续计数到 10再次，从它在 mouseleave 期间停止的数字开始。

我的代码如下所示：

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) 
})  

我怎样才能改进它以便在 mouseleave 时计数器再次变为 0 并停止任何计数？

Answer 1

您需要删除 let timer 上的 let：

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) 
})