鼠标移开时启动计时器 鼠标悬停时中断计时器 javascript

Question

我正在尝试为视频制作音量条。 这个概念是当你点击音量按钮时，会出现一个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);
  });

Answer 1

您需要使用 clearTimeout 清除超时并放入 mouseover 处理程序：

var timer;

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