如何在 10 秒不活动后显示弹出窗口答案

【问题标题】：How to display a pop up after 10 seconds of inactivity如何在 10 秒不活动后显示弹出窗口
【发布时间】：2019-08-23 10:48:12
【问题描述】：

我想在用户不活动 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 秒不活动后发生的自动弹出窗口。

【问题讨论】：

您将什么定义为“不活动”？ 10 秒内没有事件被触发？
可能与stackoverflow.com/questions/667555/…重复
检查我下面的代码它可能对你有帮助。
参考网址。这是重复的stackoverflow.com/questions/667555/…

标签： javascript jquery

【解决方案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);
    }
}

【讨论】：

【解决方案2】：

纯 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.

【讨论】：

【解决方案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;
  });

});

【讨论】：

【解决方案4】：

要重置setInterval，您需要将其清除并重新设置。使用以下代码：

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

更多信息请见this answer

【讨论】：