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

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

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

1. 背景

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

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

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

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

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

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

3. 網(wǎng)頁空閑檢測實現(xiàn)

3.1 簡易實現(xiàn)

以下代碼，簡易實現(xiàn)了一個判斷網(wǎng)頁空閑的方法。

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會有精度問題（參考）。

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

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

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

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

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 處理頁面被隱藏的情況(完整實現(xiàn))

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

/**
 * 網(wǎng)頁空閑檢測
 * @param {() => void} callback 空閑時執(zhí)行，即一定時長無操作時觸發(fā)
 * @param {number} [timeout=15] 時長，默認(rèn)15s，單位：秒
 * @param {boolean} [immediate=false] 是否立即開始，默認(rèn) 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í)行回調(diào)函數(shù)
       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
  };
};

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

4. 擴展

chrome瀏覽器其實提供了一個Idle DetectionAPI，來實現(xiàn)網(wǎng)頁空閑狀態(tài)的檢測，但是這個API還是一個實驗性特性，并且Firefox與Safari不支持。API參考

到此這篇關(guān)于使用JavaScript實現(xiàn)檢測網(wǎng)頁是否為空閑狀態(tài)的文章就介紹到這了,更多相關(guān)JavaScript檢測網(wǎng)頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: