如何检测 JavaScript 中的空闲时间？

空闲时间是用户不与网页交互的时间。这种交互可以是移动鼠标、单击页面或使用键盘。可以检测到此时间以执行某些事件，这些事件可能需要在某个空闲时间段后发生。

方法1：使用JavaScript：为了实现，创建了两个函数，一个是每当检测到用户交互时重置计时器的函数，另一个是在用户空闲时定期执行的函数。重置函数由setInterval()函数组成，该函数用于创建将重复调用另一个函数的新间隔。创建的计时器被分配给一个变量，该变量将用于在用户交互时再次调用此函数时清除旧计时器。

通过将其绑定到导致与页面交互的事件来调用此函数。其中包括 onload、onmousemove、onmousedown、ontouchstart、onclick 和 onkeypress 等方法。

当用户空闲时将调用的另一个函数可用于跟踪时间并在用户长时间不活动时执行操作。这方面的一个例子是当用户处于非活动状态超过指定时间时注销用户。

例子：

  

    
        How to detect idle
        time in JavaScript ?
    

  

    
        GeeksforGeeks
    
      
    
        How to detect idle time in
        JavaScript elegantly?
    
      
    
        The timer will be incremented every
        second to denote the idle time.
        Interaction with the mouse or
        keyboard will reset and hide the timer.
    
  
    
        You are idle for
         seconds.
    
  
    
        let timer, currSeconds = 0;
  
        function resetTimer() {
  
            /* Hide the timer text */
            document.querySelector(".timertext")
                    .style.display = 'none';
  
            /* Clear the previous interval */
            clearInterval(timer);
  
            /* Reset the seconds of the timer */
            currSeconds = 0;
  
            /* Set a new interval */
            timer = 
                setInterval(startIdleTimer, 1000);
        }
  
        // Define the events that
        // would reset the timer
        window.onload = resetTimer;
        window.onmousemove = resetTimer;
        window.onmousedown = resetTimer;
        window.ontouchstart = resetTimer;
        window.onclick = resetTimer;
        window.onkeypress = resetTimer;
  
        function startIdleTimer() {
              
            /* Increment the
                timer seconds */
            currSeconds++;
  
            /* Set the timer text
                to the new value */
            document.querySelector(".secs")
                .textContent = currSeconds;
  
            /* Display the timer text */
            document.querySelector(".timertext")
                .style.display = 'block';
        }
    

  

输出：

• 与页面交互后：
  
• 不与页面交互后：
  

方法2：使用jQuery：和上面的方法类似，但是这里不是每次检测到用户交互时都创建一个新的定时器。相反，只要检测到用户交互，运行计时器就会重置为 0。为了实现，创建了两个函数，一个是在检测到用户交互时将计时器重置为 0 的函数，另一个是在用户空闲期间定期执行的函数。
定义了一个新变量，它将全局表示空闲计时器的当前时间。

使用 document.ready() 事件，创建了一个带有setInterval()函数的计时器，它重复调用另一个函数来处理当用户空闲一段指定时间时会发生什么。重置函数由一个简单的语句组成，它将定时器变量的值更改为 0，从而有效地重置当前空闲时间。通过将其绑定到导致与页面交互的事件来调用此函数。其中包括 onload、onmousemove、onmousedown、ontouchstart、onclick 和 onkeypress 等方法。

例子：

  

    
        How to detect idle
        time in JavaScript ?
    
      
        
    

  

    
        GeeksforGeeks
    
      
    
        How to detect idle time in
        JavaScript elegantly?
    
      
    
        The timer will be incremented every 
        second to denote the idle time.
        Interaction with the mouse or keyboard
        will reset and hide the timer.
    
  
    
        You are idle for
         seconds.
    
      
    
        var currSeconds = 0;
          
        $(document).ready(function() {
  
            /* Increment the idle time
                counter every second */
            let idleInterval =
                setInterval(timerIncrement, 1000);
  
            /* Zero the idle timer
                on mouse movement */
            $(this).mousemove(resetTimer);
            $(this).keypress(resetTimer);
        });
  
        function resetTimer() {
  
            /* Hide the timer text */
            document.querySelector(".timertext")
                .style.display = 'none';
              
            currSeconds = 0;
        }
  
        function timerIncrement() {
            currSeconds = currSeconds + 1;
  
            /* Set the timer text to
                the new value */
            document.querySelector(".secs")
                .textContent = currSeconds;
  
            /* Display the timer text */
            document.querySelector(".timertext")
                .style.display = 'block';
        }
    

  

输出：

• 与页面交互后：
  
• 不与页面交互后：