js判斷用戶有沒有操作頁面

原創

2020-02-22 04:25

用js判斷用戶有沒有操作頁面，我們所要做的就是整理我們的思路。

一、思路

用戶有沒有操作界面，我們可以從頁面在規定時間內有沒有觸發事件去考慮。比如用戶有沒有點擊，有沒有按鍵，有沒有滾動鼠標滾軸。用戶有沒有移動鼠標等等。如果用戶沒有進行這些操作，那麼我們可以大概的認爲用戶沒有操作頁面。我們可以給一個定時器。來記錄在規定時間內用戶有沒有觸發這些事件。我直接貼代碼，代碼的具體含義，我就不再講解，思路大概就是這樣。

二、代碼演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js判斷用戶有沒有操作頁面</title>
</head>
<body>


<script>
  window.onload = function (){

      (function($){
          funObj = {
              timeUserFun:'timeUserFun',
          }
          $[funObj.timeUserFun] = function(time){
              var time = time || 2;
              var userTime = time*60;
              var objTime = {
                  init:0,
                  time:function(){
                      objTime.init += 1;
                      if(objTime.init == userTime){
                          console.log(111)  // 用戶到達未操作事件 做一些處理
                      }
                  },
                  eventFun:function(){
                      clearInterval(testUser);
                      objTime.init = 0;
                      testUser = setInterval(objTime.time,1000);
                  }
              }

              var testUser = setInterval(objTime.time,1000);

              var body = document.querySelector('html');
              body.addEventListener("click",objTime.eventFun);
              body.addEventListener("keydown",objTime.eventFun);
              body.addEventListener("mousemove",objTime.eventFun);
              body.addEventListener("mousewheel",objTime.eventFun);
          }
      })(window)


//     直接調用 參數代表分鐘數,可以有一位小數;
       timeUserFun(0.1);
  }

</script>

</body>
</html>