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 的实际效果。

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

1 个答案: