How to display a pop up after 10 seconds of inactivity

Question

I want to display a price alarm pop up after 10 seconds of inactivity of user. Right now the pop up appears only on click. I want to replace it.

I tried my best but couldn't get it done.

$(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);
  });
});

The last part of the code leads to click enabled pop up. How can I replace it with automatic pop up which occurs after 10 seconds of inactivity.

What do you define as "inactivity"? 10 seconds of no events being fired? — Jack Bashford, Apr 02 '19 at 07:35
Possible duplicate with https://stackoverflow.com/questions/667555/how-to-detect-idle-time-in-javascript-elegantly — Ciprian B, Apr 02 '19 at 07:38
refer the url. this is duplicate https://stackoverflow.com/questions/667555/how-to-detect-idle-time-in-javascript-elegantly — Bathri Nathan, Apr 02 '19 at 07:52

score 2 · Answer 1 · answered Apr 02 '19 at 07:50

this will help you to capture 10 sec of inactivity in screen.change the code as such u need .

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);
    }
}

score 0 · Answer 2 · answered Apr 02 '19 at 07:40

0

To reset a setInterval, you need to clear it and set it again. Use the following code:

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

See this answer for more info

answered Apr 02 '19 at 07:40

jro

900
1
10
21

score 0 · Answer 3 · answered Apr 02 '19 at 07:41

Try this.

 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;
  });

});

score 0 · Answer 4 · answered Apr 02 '19 at 07:42

Pure JavaScript approach

You can keep a timer for 10 seconds using setTimeout and clear it whenever their is activity and restart it immediately.

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.

How to display a pop up after 10 seconds of inactivity

4 Answers4