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

Question

我正在尝试为视频制作音量条。 这个概念是，当您单击音量按钮时，会出现一个 div，您可以用它来控制音量级别。当您将鼠标悬停在 div 之外时，计数器会从 7 开始倒计时，并使 div 消失。 但是，如果计数器启动并且您将鼠标悬停在音量 Controller 上，计数器就会停止。 我不知道如何中断计时器倒计时。有任何输入吗？

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

  //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';
});