使用JavaScript實現檢測網頁是否為空閑狀態(tài)

更新時間：2024年03月28日 11:14:40 作者：求知若饑

最近開發(fā)項目時,常碰到“用戶在一定時間內無任何操作時,跳轉到某個頁面”的需求,所以本文就來使用JavaScript實現這一要求,需要的可以參考下

1. 背景

最近開發(fā)項目時，常碰到“用戶在一定時間內無任何操作時，跳轉到某個頁面”的需求。

網上沖浪后，也沒有找到一個比較好的js封裝去解決這個問題，從而決定自己實現。

2. 如何判斷頁面是否空閑(用戶長時間無操作)

首先，我們要知道什么是空閑？用戶一定時間內，沒有對網頁進行任何操作，則當前網頁為空閑狀態(tài)。

用戶操作網頁，無非就是通過鼠標、鍵盤兩個輸入設備(暫不考慮手柄等設備)。因而我們可以監(jiān)聽相應的輸入事件，來判斷網頁是否空閑(用戶是否操作網頁)。

監(jiān)聽鼠標移動事件mousemove；
監(jiān)聽鍵盤按下事件mousedown；
在用戶進入網頁后，設置延時跳轉，如果觸發(fā)以上事件，則移除延時器，并重新開始。

3. 網頁空閑檢測實現

3.1 簡易實現

以下代碼，簡易實現了一個判斷網頁空閑的方法。

const onIdleDetection = (callback, timeout = 15, immediate = false) => {
  let pageTimer;
  
  const onClearTimer = () => {
    pageTimer && clearTimeout(pageTimer);
    pageTimer = undefined;
  };
  const onStartTimer = () => {
    onClearTimer();
    pageTimer = setTimeout(() => {
      callback();
    }, timeout * 1000);
  };

  const startDetection = () => {
    onStartTimer();
    document.addEventListener('mousedown', onStartTimer);
    document.addEventListener('mousemove', onStartTimer);
  };
  const stopDetection = () => {
    onClearTimer();
    document.removeEventListener('mousedown', onStartTimer);
    document.removeEventListener('mousemove', onStartTimer);
  };
  const restartDetection = () => {
      onClearTimer();
      onStartTimer();
  };

  if (immediate) {
    startDetection();
  }

  return {
    startDetection,
    stopDetection,
    restartDetection
  };
};

也許你注意到了，我并沒有針對onStartTimer事件進行防抖，那這是不是會對性能有影響呢？

是的，肯定有那么點影響，那我為啥不添加防抖呢？

這是因為添加防抖后，形成了setTimeout嵌套，嵌套setTimeout會有精度問題（參考）。

或許你還會說，非活動標簽頁（網頁被隱藏）的setTimeout的執(zhí)行和精度會有問題（參考非活動標簽的超時）。

確實存在以上問題，接下來我們就來一一解決吧！

3.2 處理頻繁觸發(fā)問題

我們可以通過添加一個變量記錄開始執(zhí)行時間，當下一次執(zhí)行與當前的時間間隔小于某個值時直接退出函數，從而解決這個問題(節(jié)流思想應用)。

const onIdleDetection = (callback, timeout = 15, immediate = false) => {
  let pageTimer;
  // 記錄開始時間
  let beginTime = 0;
  const onStartTimer = () => {
    // 觸發(fā)間隔小于100ms時，直接返回
    const currentTime = Date.now();
    if (pageTimer && currentTime - beginTime < 100) {
      return;
    }

    onClearTimer();
    // 更新開始時間
    beginTime = currentTime;
    pageTimer = setTimeout(() => {
      callback();
    }, timeout * 1000);
  };
  const onClearTimer = () => {
    pageTimer && clearTimeout(pageTimer);
    pageTimer = undefined;
  };
  
  const startDetection = () => {
    onStartTimer();
    document.addEventListener('mousedown', onStartTimer);
    document.addEventListener('mousemove', onStartTimer);
  };
  const stopDetection = () => {
    onClearTimer();
    document.removeEventListener('mousedown', onStartTimer);
    document.removeEventListener('mousemove', onStartTimer);
  };
  const restartDetection = () => {
      onClearTimer();
      onStartTimer();
  };
  
  if (immediate) {
    startDetection();
  }

  return {
    startDetection,
    stopDetection,
    restartDetection
  };
};

3.3 處理頁面被隱藏的情況(完整實現)

我們可以監(jiān)聽visibilitychange事件，在頁面隱藏時移除延時器，然后頁面顯示時繼續(xù)計時，從而解決這個問題。

/**
 * 網頁空閑檢測
 * @param {() => void} callback 空閑時執(zhí)行，即一定時長無操作時觸發(fā)
 * @param {number} [timeout=15] 時長，默認15s，單位：秒
 * @param {boolean} [immediate=false] 是否立即開始，默認 false
 * @returns
 */
const onIdleDetection = (callback, timeout = 15, immediate = false) => {
  let pageTimer;
  let beginTime = 0;
  const onClearTimer = () => {
    pageTimer && clearTimeout(pageTimer);
    pageTimer = undefined;
  };
  const onStartTimer = () => {
    const currentTime = Date.now();
    if (pageTimer && currentTime - beginTime < 100) {
      return;
    }

    onClearTimer();
    beginTime = currentTime;
    pageTimer = setTimeout(() => {
      callback();
    }, timeout * 1000);
  };

  const onPageVisibility = () => {
     // 頁面顯示狀態(tài)改變時，移除延時器
     onClearTimer();

     if (document.visibilityState === 'visible') {
       const currentTime = Date.now();
       // 頁面顯示時，計算時間，如果超出限制時間則直接執(zhí)行回調函數
       if (currentTime - beginTime >= timeout * 1000) {
         callback();
         return;
       }
       // 繼續(xù)計時
       pageTimer = setTimeout(() => {
         callback();
       }, timeout * 1000 - (currentTime - beginTime));
     }
  };

  const startDetection = () => {
    onStartTimer();
    document.addEventListener('mousedown', onStartTimer);
    document.addEventListener('mousemove', onStartTimer);
    document.addEventListener('visibilitychange', onPageVisibility);
  };

  const stopDetection = () => {
    onClearTimer();
    document.removeEventListener('mousedown', onStartTimer);
    document.removeEventListener('mousemove', onStartTimer);
    document.removeEventListener('visibilitychange', onPageVisibility);
  };
  
  const restartDetection = () => {
      onClearTimer();
      onStartTimer();
  };

  if (immediate) {
    startDetection();
  }

  return {
    startDetection,
    stopDetection,
    restartDetection
  };
};

通過以上代碼，我們就完整地實現了一個網頁空閑狀態(tài)檢測的方法。