Question

I can’t seem to figure out the logic here. I have a an element that hides until the mouse is moved (utilBar) and i want it to stay displayed even after the timer ends IF the mouse is still moving. Obviously what I figured was, on mouse moving start a timer and display the element and if there is another mouse move after the first one stop the timer and start it again repeatedly therefore the timer never ends as long as the mouse is moving.

the problem is my element is blinking after the 1000 milliseconds is up flashing on/off as I move the mouse. I think I’m just tripping on the logic here, but I can’t figure it out.

//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

They way you are currently doing it is creating a new EventListener that will clear the timeout every time the mouse moves. I think the logic you’re looking for is this:

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

Here’s the jsfiddle of it in action.