在 JavaScript 中使用计时器停止显示块/无闪烁

Question

我似乎无法弄清楚这里的逻辑。我有一个隐藏的元素，直到鼠标移动 (utilBar)，并且我希望即使在计时器结束后 IF 鼠标仍在移动时它仍保持显示。显然我的想法是，在鼠标移动时启动计时器并显示元素，如果在第一个鼠标移动后有另一个鼠标移动，则停止计时器并重复启动它，因此只要鼠标移动，计时器就永远不会结束。

问题是我的元素在 1000 毫秒后闪烁，当我移动鼠标时闪烁。我想我只是在这里逻辑上绊倒，但我无法弄清楚。

//Separate function to pass in utilBarTimer into the setTimeout
function timerFunction(utilBarTimer){
  self.iframe.addEventListener('mousemove',function(){
    clearTimeout(window.utilBarTimer);
  });
  utilBar.style.display = 'none';
}
self.iframe.addEventListener('mousemove',function(){
  utilBar.style.display = 'block';
  var utilBarTimer = window.setTimeout(function(){
    timerFunction(utilBarTimer)
  },1000);
});

Answer 1

您当前执行此操作的方式是创建一个新的 EventListener ，每次鼠标移动时都会清除超时。我认为您正在寻找的逻辑是这样的：

var utilBar = document.getElementById('utilBar'),
    utilBarTimer;

window.addEventListener('mousemove', function() {
    utilBar.style.display = 'block';

    // if we have a timer already running, kill it out
    if (utilBarTimer) {
        clearTimeout(utilBarTimer);   
    }

    // begin a new timer that hides our object after 1000 ms
    utilBarTimer = window.setTimeout(function() {
        utilBar.style.display = 'none';
    }, 1000);
});

这是它的 jsfiddle在行动中。