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

问题是我移动鼠标后,元素在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);
});

===============>>#1 票数:1 已采纳

它们当前正在执行的操作方式是创建一个新的EventListener ,该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它在行动。

  ask by Oscar Godson translate from so

未解决问题?本站智能推荐: