중지 표시 블럭 깜박임/자바 스크립트에서 타이머 없음 없음

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입니다.