如何在 10 秒不活動后顯示彈出窗口

Question

我想在用戶不活動 10 秒后彈出價格警報。 現在彈出窗口僅在單擊時出現。 我想更換它。

我盡了最大的努力，但無法完成。

$(document).ready(function () {
  var idleInterval = setInterval(inActiveTimer, 1000);
  $(this).mousemove(function (e) {
    idleTime = 0;
  });
  $(this).keypress(function (e) {
    idleTime = 0;
  });
  $(".sleepy-close, .sleepy-overlay, .sleepy-wake-up").click(function () {
    $(".sleepy-overlay").hide();
    clearInterval(idleInterval);
  });
});

代碼的最后一部分導致單擊啟用彈出。 如何用 10 秒不活動后自動彈出來替換它。

Answer 1

這將幫助您在屏幕中捕獲 10 秒的不活動狀態。根據需要更改代碼。

 document.body.innerText = "hello count the seconds"; setIdleTimeout(10000, function() { document.body.innerText = "Where did you go?"; }, function() { document.body.innerText = "Welcome back!"; }); function setIdleTimeout(millis, onIdle, onUnidle) { var timeout = 0; startTimer(); function startTimer() { timeout = setTimeout(onExpires, millis); document.addEventListener("mousemove", onActivity); document.addEventListener("keypress", onActivity); } function onExpires() { timeout = 0; onIdle(); } function onActivity() { if (timeout) clearTimeout(timeout); else onUnidle(); //since the mouse is moving, we turn off our event hooks for 1 second document.removeEventListener("mousemove", onActivity); document.removeEventListener("keypress", onActivity); setTimeout(startTimer, 1000); } }

Answer 2

要重置setInterval ，您需要將其清除並重新設置。 使用以下代碼：

// Instead of idleTime = 0
clearInterval(idleInterval);
idleInterval = setInterval(inActiveTimer, 10000);

有關更多信息，請參閱此答案

Answer 3

嘗試這個。

 var idleTime = 0;

 $(document).ready(function () {

  var idleInterval = setInterval(function(){ 
      if(idleTime >= 10){
        $(".sleepy-overlay").hide(); // enabling the popup 
        idleTime = 0;
      }else{ 
        idleTime++;
      } 
    }, 1000); 

  $(this).mousemove(function (e) {
   idleTime = 0;
  });

  $(this).keypress(function (e) {
   idleTime = 0;
  });

});

Answer 4

純 JavaScript 方法

您可以使用setTimeout將計時器保留 10 秒，並在它們處於活動狀態時將其清除並立即重新啟動。

 var timeout; function resetTimer(){ clearTimeout(timeout); console.log("Clearing timer because of activity"); timeout = setTimeout(function(){ alert("Done with 10 Seconds!"); //Trigger your popup here }, 10000); } document.onmousemove = resetTimer; document.onkeypress = resetTimer; //You can add more activity event listeners like click etc.