在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