javascript - clearTimeout 如何工作，用于在前一个仍在运行时清除超时？

Question

我正在为我的视频创建一个播放和暂停按钮。超时完成后，该视频将消失，因为它会关闭 .active 类，这会将其恢复为 0 不透明度。我已将其绑定(bind)到 onmousemove 为此，我使用了 clearTimeout。

我无法让它工作。播放按钮会闪烁，因为类不断被添加。

这是我的功能

const togglePlay = (...args) => playButton.classList.toggle(...args);
var timer = null;
     vid.onmousemove = function(){

        if (timer!= null){
            clearTimeout(timer);
        }
        else {
            togglePlay("active");
            timer = setTimeout(() => {
                togglePlay("active");
                stopTime();
            }, 2000);
        }
     }

我已经阅读了多篇关于同样问题的帖子。我尝试实现这个:How to use clearTimeout

我从另一篇文章中得到了 timer=null。

我也用另一种方式尝试过，改为禁用 togglePlay。这确实可以达到我想要的效果，但通过测试控制台日志，它仍然在后台触发很多。

我是这样做的

     var timer = null;
     vid.onmousemove = function(){


        if (timer != null){
            console.log("TimedOut"); 
        }
        else {
            //right here is the mistake, this is not a timer
            timer = togglePlay("active");
            setTimeout(() => {
                togglePlay("active");
                timer = null;
                console.log("setTimeout");
            }, 2000);  
        }
     }

虽然这段代码有点违背了 clearTimeout 的目的。所以我的问题真的。我对 setTimeout 做错了什么？

Answer 1

如果您在调用 setTimeout 之前删除对 togglePlay 的调用，那么您首先显示的函数应该可以正常工作:

const vid = document.querySelector('#foo');

const togglePlay = (...args) => vid.classList.toggle(...args);

var timer = null;
vid.onmousemove = function(){
  if (timer){ clearTimeout(timer); }
  timer = setTimeout(() => {
      togglePlay("active");
      // stopTime();
  }, 500);

}

#foo {
  width: 300px;
  height: 200px;
  background: #c00;
}

#foo.active {
  background: #090;
}

<div id="foo"></div>

此代码去抖动 每次鼠标移动时的 Action 。如果您想要节流，请按以下方式进行:

const vid = document.querySelector('#foo');

const togglePlay = (...args) => vid.classList.toggle(...args);

var timer = null;
vid.onmousemove = function(){
  if (!timer){
    timer = setTimeout(() => {
      togglePlay("active");
      timer = null;
      // stopTime();
    }, 500);
  }
}

#foo {
  width: 300px;
  height: 200px;
  background: #c00;
}

#foo.active {
  background: #090;
}

<div id="foo"></div>