javascript - 鼠标移出时启动计时器鼠标移出时中断计时器

我正在尝试制作视频的音量栏。
其概念是，当您单击音量按钮时，将显示一个div，您可以使用它来控制音量。当您从div悬停时，计数器会从7开始递减计数，并使div消失。
但是，如果计数器启动并且您将鼠标悬停在音量控制器上，则计数器将停止。
我不知道如何打断计时器倒计时。任何输入？

这就是我到目前为止所得到的。

  //event for volume bar
  volumeC.addEventListener("mouseover", function(){
    volumeC.style.display = 'inline-block';
  });

  volumeC.addEventListener("mouseout", function(){
     timer = setTimeout(function () {
        volumeC.style.display = 'none';
      }, 7000);
  });

最佳答案

您需要使用放置在clearTimeout处理程序中的mouseover清除超时：

var timer;

volumeC.addEventListener("mouseover", function () {
    clearTimeout(timer);
    volumeC.style.display = 'inline-block';
});