JavaScript에서 유휴 상태에 대한 작업 수행

Question

다음을 수행하는 웹 페이지에 스크립트를 설정하려고합니다. 마우스가 일정 시간 (예 : 5 초) 동안 비활성 상태 인 경우, 말하자면, 요소를 숨기는 것); 그런 다음, 마우스가 이동 된 경우, 조치를 수행하십시오 (예 : 요소 숨김 해제).

사용자가 마우스를 사용하지 않을 때 (키보드가 비활성 상태 일 필요는 없음) 작업을 수행 할 수있는 방법이 있습니다.

도움 주셔서 감사합니다.

Answer 1

당신이 jQuery를 사용하는 경우 :

(function() { 
    var timeout; 
    var isHidden = false; 
    $(document).mousemove(function() { 
     if (timeout) { 
      window.clearTimeout(timeout); 
     } 
     timeout = window.setTimeout(function() { 
      if (!isHidden) { 
       //hide the element here 
       isHidden = true; 
      } 
     }, 5000); 
     if (isHidden) { 
      //show the element here 
      isHidden = false; 
     } 
    }); 
})(); 

비의 jQuery 버전 : 나는 정상 자바 스크립트를 사용하고

(function() { 
    var timeout; 
    var isHidden = false; 

    function hideOnIdle() { 
     if (timeout) { 
      window.clearTimeout(timeout); 
     } 
     timeout = window.setTimeout(function() { 
      if (!isHidden) { 
       //hide the element here 
       isHidden = true; 
      } 
     }, 5000); 
     if (isHidden) { 
      //show the element here 
      isHidden = false; 
     } 
    } 

    if (document.addEventListener) { 
     document.addEventListener("mousemove", hideOnIdle); 
    } else { 
     document.attachEvent("onmousemove", hideOnIdle); 
    } 
})(); 

jsfiddle