'mouseleave' 上的 clearInterval

Question

我正在使用 Javascript 在我的 html 中创建一个可视计数器。起初计数器为“0”。 在 mouseenter 上它开始计数到 10（每秒加 +1），在 moueseleave 上它应该再次重置为 0 并停止计数，但是，当我将 cursor 移开时它只会很快重置为 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

您需要删除mouseenter回调中的let on let timer ：

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

原因是，当您执行let timer时，您实际上是在填充一个名为timer的新本地变量，而代码顶部的另一个变量将不会被填充。 这意味着您在mouseleave处理程序内部的clearInterval实际上并未取消任何内容。

Answer 2

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

在这部分代码中，您一次又一次地设置计时器。 如果删除关键字let它将完美运行。

Answer 3

这不完全是您所要求的，但在某些情况下它可能很有用，至少知道您可以在一个侦听器中完成所有这些操作。 我不知道这是否最适合您的具体情况； 但经常将这种模式用于拖动事件。 它将两个事件保持在同一个 scope 中，并且mouseleave事件仅在mouseenter事件之后才“激活”，并在之后立即将其删除。

 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 class="box4"></div>