在大多數(shù)情況下，您并不真正在乎用戶是否積極參與或暫時(shí)非活動(dòng)。不活動(dòng)的意思是，也許他們起床喝水，或者更有可能更改了標(biāo)簽，以做其他事情。但是，在跟蹤用戶活動(dòng)和檢測非活動(dòng)性時(shí)，存在一些情況。

當(dāng)您可能需要該功能時(shí)，讓我們考慮幾個(gè)示例：

• 跟蹤文章閱讀時(shí)間
• 自動(dòng)保存表格或文檔
• 自動(dòng)暫停游戲
• 隱藏視頻播放器控件
• 出于安全原因自動(dòng)登錄用戶

我最近遇到了一個(gè)涉及最后一個(gè)示例的功能，出于安全原因，自動(dòng)記錄了非活動(dòng)用戶。

我們?yōu)槭裁匆P(guān)心自動(dòng)注銷？

許多應(yīng)用程序使用戶可以訪問其數(shù)量的個(gè)人數(shù)據(jù)。根據(jù)應(yīng)用程序的目的，該數(shù)據(jù)的數(shù)量和值可能不同。它可能僅是用戶的名稱，但也可能是更敏感的數(shù)據(jù)，例如醫(yī)療記錄，財(cái)務(wù)記錄等。

有些用戶可能會(huì)忘記注銷并使會(huì)話打開。它發(fā)生了多少次？也許您的手機(jī)突然響了，或者您需要立即離開，將瀏覽器留在那里。打開用戶會(huì)話是危險(xiǎn)的，因?yàn)槠渌丝赡軙?huì)使用該會(huì)話來提取敏感數(shù)據(jù)。

解決此問題的一種方法是跟蹤如果用戶在一定時(shí)間內(nèi)與應(yīng)用程序進(jìn)行交互，則在超過該時(shí)間的時(shí)間內(nèi)觸發(fā)注銷。您可能需要顯示一個(gè)彈出窗口，或者可能會(huì)警告用戶注銷即將發(fā)生的計(jì)時(shí)器?；蛘撸?dāng)檢測到不活動(dòng)用戶時(shí)，您可能會(huì)立即注銷。

下降一個(gè)級別，我們想做的就是計(jì)算用戶上次交互中傳遞的時(shí)間。如果那個(gè)時(shí)間段比我們的閾值更長，我們想解雇我們的無活動(dòng)處理程序。如果用戶在破壞閾值之前執(zhí)行操作，我們將重置計(jì)數(shù)器并重新計(jì)數(shù)。

本文將展示如何基于此示例實(shí)現(xiàn)此類活動(dòng)跟蹤邏輯。

步驟1：實(shí)現(xiàn)跟蹤邏輯

讓我們實(shí)現(xiàn)兩個(gè)功能。第一個(gè)將負(fù)責(zé)每次用戶與應(yīng)用程序進(jìn)行交互時(shí)重置我們的計(jì)時(shí)器，第二個(gè)將處理用戶變得不活動(dòng)時(shí)的情況：

• RESETUSERACTIVITIONTIMETOUT - 這將是我們的方法，負(fù)責(zé)清除現(xiàn)有超時(shí)并每次用戶與應(yīng)用程序進(jìn)行交互時(shí)啟動(dòng)新的超時(shí)。
• INTACTIVEUSERACTION - 這將是我們的方法在用戶活動(dòng)超時(shí)用完時(shí)被觸發(fā)的方法。

令UserActivityTimeOut = null;

函數(shù)restuseractivitivitivitivity timeout（）{
  clearTimeOut（userActivityTimeout）;
  userActivityTimeout = settimeout（（）=> {
    intacriveuseraction（）;
  }，InActive_user_time_threshold）;
}

函數(shù)intactiveUserAction（）{
  //注銷邏輯
}

好的，因此我們有負(fù)責(zé)跟蹤活動(dòng)的方法，但我們在任何地方都不使用它們。

步驟2：跟蹤激活

現(xiàn)在，我們需要實(shí)現(xiàn)負(fù)責(zé)激活跟蹤的方法。在這些方法中，我們添加了事件偵聽器，這些偵聽器將在檢測到事件時(shí)調(diào)用我們的repetuseractivityTime Out方法。您可以根據(jù)需要收聽盡可能多的事件，但是為簡單起見，我們將該列表限制在一些最常見的列表中。

函數(shù)activateactivityTracker（）{
  window.addeventListener（“ mousemove”，repetuseractivityTimeout）;
  window.AddeventListener（“ scroll”，repetuseractivityTimeout）;
  window.AddeventListener（“ keydown”，repetuseractivitivitivitivity timeout）;
  window.addeventListener（“ ressize”，repetuseractivityTimeout）;
}

就是這樣。我們的用戶跟蹤已準(zhǔn)備就緒。我們唯一需要做的就是在頁面加載上調(diào)用ActivateActivityTracker。

我們可以這樣留下來，但是如果您仔細(xì)觀察，我們剛剛提出的代碼就會(huì)存在嚴(yán)重的性能問題。每次用戶與應(yīng)用程序進(jìn)行交互時(shí)，整個(gè)邏輯都會(huì)運(yùn)行。很好，但是仔細(xì)看。當(dāng)用戶與頁面交互時(shí)，即使不是我們的跟蹤，也有一些類型的事件被釋放出大量次數(shù)。讓我們看一下Mousemove活動(dòng)。即使您只需觸摸鼠標(biāo)，Mousemove事件也會(huì)被射擊數(shù)十次。這是一個(gè)真正的性能殺手。我們可以通過引入一個(gè)智能器來解決該問題，該節(jié)能器將允許每個(gè)指定時(shí)間段僅觸發(fā)一次用戶活動(dòng)邏輯。

讓我們現(xiàn)在就這樣做。

步驟3：提高性能

首先，我們需要添加另一個(gè)變量，該變量將繼續(xù)參考我們的油門超時(shí)。

讓UserActivityThrottLertimeout = null

然后，我們創(chuàng)建一種將創(chuàng)建我們的插座的方法。在該方法中，我們檢查了油門超時(shí)是否已經(jīng)存在，如果不存在，我們會(huì)創(chuàng)建一個(gè)將在特定時(shí)間段內(nèi)啟動(dòng)RESETUSERACTIVITY TIMET OUT。那是所有用戶活動(dòng)都不會(huì)再次觸發(fā)跟蹤邏輯的時(shí)期。在那段時(shí)間之后，油門超時(shí)已清除，允許下一個(gè)交互重置活動(dòng)跟蹤器。

 userActivityThrottler（）{
  如果（！useractivityThrottLertimeout）{
    userActivityThrottlertimeout = settimeout（（）=> {
      restuseractivitivitivityTimeOut（）;

      ClearTimeOut（userActivityThrottLertimeout）;
      userActivityThrottLertimeout = null;
    }，user_activity_throttler_time）;
  }
}

我們剛剛創(chuàng)建了一種新方法，該方法應(yīng)在用戶互動(dòng)時(shí)觸發(fā)，因此我們需要記住將事件處理程序從我們的激活邏輯中從repentuseractivityTimeout到UserActivityThrottler更改。

 activateactivityTracker（）{
  window.AddeventListener（“ Mousemove”，UserActivityThrottler）;
  // ...
}

獎(jiǎng)金：讓我們對此進(jìn)行復(fù)興！

現(xiàn)在，我們已經(jīng)實(shí)現(xiàn)了我們的活動(dòng)跟蹤邏輯，讓我們看看如何將邏輯移至使用VUE構(gòu)建的應(yīng)用程序。我們將基于此示例的解釋。

首先，我們需要將所有變量移動(dòng)到組件的數(shù)據(jù)中，這是所有反應(yīng)性道具都活的地方。

導(dǎo)出默認(rèn){
  數(shù)據(jù)（） {
    返回 {
      ISINACTIVE：false，
      userActivityThrottlertimeout：null，
      userActivityTimeout：null
    };
  }，，
// ...

然后，我們將所有功能移動(dòng)到方法：

 // ...
  方法： {
    activateactivityTracker（）{...}，
    restuseractivitivitivitivity timeout（）{...}，
    useractivityThrottler（）{...}，
    intactiveuseraction（）{...}
  }，，
// ...

由于我們正在使用VUE及其反應(yīng)性系統(tǒng)，因此我們可以刪除所有直接的DOM操作i。（即document.getElementById（“ app”）。innerhtml），并依賴于我們的ISINARTIVE數(shù)據(jù)屬性。我們可以在下面的模板中直接訪問數(shù)據(jù)屬性。

 
  <div>
    <p>用戶無效= {{iNInActive}} </p>
  </div>

我們需要做的最后一件事是找到一個(gè)適當(dāng)?shù)牡胤郊せ罡欉壿嫛?Vue帶有組件生命周期掛鉤，這正是我們需要的 - 特別是BeforeMount鉤子。因此，讓我們把它放在那里。

 // ...
  beforemount（）{
    this.activateactivityTracker（）;
  }，，
// ...

我們還有一件事可以做。由于我們在窗口上使用超時(shí)并注冊事件聽眾，因此自己清理一點(diǎn)總是一個(gè)好習(xí)慣。我們可以在另一個(gè)生命周期鉤子Beforedestroy中做到這一點(diǎn)。讓我們刪除我們注冊的所有偵聽器，并在組件的生命周期結(jié)束時(shí)清除所有超時(shí)。

 // ...
  beforedestroy（）{
    Window.RemoveEventListener（“ Mousemove”，this.useractivityThrottler）;
    window.removeEventListener（“ scroll”，this.useractivityThrottler）;
    window.removeeventlistener（“ keydown”，this.useractivityThrottler）;
    window.removeEventListener（“ resize”，this.useractivityThrottler）;
  
    clearTimeOut（this.useractivityTimeOut）;
    clearTimeOut（this.useractivityThrottLertimeout）;
  }
// ...

那是一個(gè)包裹！

該示例純粹集中于檢測用戶與應(yīng)用程序的交互，對其反應(yīng)并在特定時(shí)間段內(nèi)未檢測到相互作用時(shí)發(fā)射方法。我希望這個(gè)示例盡可能地通用，因此這就是為什么我將檢測到的不活動(dòng)用戶的實(shí)現(xiàn)留給您。

希望您能發(fā)現(xiàn)此解決方案對您的項(xiàng)目有用！

以上是檢測非活動(dòng)用戶的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！