欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2024年03月28日 11:14:40   作者：求知若饑  
最近開發(fā)項(xiàng)目時(shí),常碰到“用戶在一定時(shí)間內(nèi)無任何操作時(shí),跳轉(zhuǎn)到某個(gè)頁面”的需求,所以本文就來使用JavaScript實(shí)現(xiàn)這一要求,需要的可以參考下

1. 背景

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

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

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

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

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

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

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

3.1 簡易實(shí)現(xiàn)

以下代碼，簡易實(shí)現(xiàn)了一個(gè)判斷網(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事件進(jìn)行防抖，那這是不是會對性能有影響呢？

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

這是因?yàn)樘砑臃蓝逗?，形成?code>setTimeout嵌套，嵌套setTimeout會有精度問題（參考）。

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

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

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

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

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

    onClearTimer();
    // 更新開始時(shí)間
    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 處理頁面被隱藏的情況(完整實(shí)現(xiàn))

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

/**
 * 網(wǎng)頁空閑檢測
 * @param {() => void} callback 空閑時(shí)執(zhí)行，即一定時(shí)長無操作時(shí)觸發(fā)
 * @param {number} [timeout=15] 時(shí)長，默認(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)改變時(shí)，移除延時(shí)器
     onClearTimer();

     if (document.visibilityState === 'visible') {
       const currentTime = Date.now();
       // 頁面顯示時(shí)，計(jì)算時(shí)間，如果超出限制時(shí)間則直接執(zhí)行回調(diào)函數(shù)
       if (currentTime - beginTime >= timeout * 1000) {
         callback();
         return;
       }
       // 繼續(xù)計(jì)時(shí)
       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
  };
};

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

4. 擴(kuò)展

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

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

相關(guān)文章

最新評論