How can I stop a page from refreshing after a certain amount of time javascript

Question

I want my page to reload every so often, but if a user is inactive for say 5 minutes I want to stop the page from reloading. I have an example on http://codepen.io/tetonhiker/pen/gLeRmw .

Right now it's refreshing every 10 seconds. Again I want it to stop say after 5 minutes of refreshing when a user is inactive. How can I do this?

var timer = null;
$(function() {
  // Get the time to stop the effect
  var stopTime = new Date();
  stopTime.setMinutes(stopTime.getMinutes() + 5);
  // Get a reference to the timer so it can be cancelled later
  timer = setInterval(function() {
    // Check to see if the timer should stop
    var currentTime = new Date();
    if(currentTime  < stopTime){ 
      var randomnumber = Math.floor(Math.random() * 100);
      $('#show').text(
        'I am getting refreshed every minute..! Random Number ==> '  + randomnumber);
    } else {
      // Stop the timer
      clearInterval(timer); 
    }
  }, 60 * 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show" align="center"></div>
 
    <div align="center">

    </div>

It might be more clear if you change your wording to be 'updating the contents of the show' rather than saying reload or refresh, which is usually associated with a browser action. — Taplar, Dec 06 '16 at 18:26
Possible duplicate of [Stop setInterval](http://stackoverflow.com/questions/16437173/stop-setinterval) — Heretic Monkey, Dec 06 '16 at 18:29

score 3 · Accepted Answer · edited Dec 07 '16 at 21:41

3

Just set a variable equal to the timer id and cancel when your condition is met:

var timer = null;

// As soon as the document is ready:
$(function() {
   // Activate the timer:
   startClock();
});

// And, when the user interacts with the page, start over
$(document).on("mousemove click", function(){ 
  // Stop the previously running timer
  clearInterval(timer);

  // Start the clock over again:
  startClock();
});

function startClock(){
  // Get the time to stop the effect
  var stopTime = new Date();
  stopTime.setMinutes(stopTime.getMinutes() + 5);

  // Get a reference to the timer so it can be cancelled later
  timer = setInterval(function() {

    // Check to see if the timer should stop
    var currentTime = new Date();
    if(currentTime  < stopTime){ 
      var randomnumber = Math.floor(Math.random() * 100);
      $('#show').text("I am getting refreshed every 10 seconds..! " +
                      "Random Number ==> " + randomnumber);
    } else {
      // Stop the timer
      clearInterval(timer); 
    }
  }, 10000);
}

edited Dec 07 '16 at 21:41

nominolo

5,085
2
25
31

answered Dec 06 '16 at 18:27

Scott Marcus

64,069
6
49
71

how could I reset the timer once a user is active again? – lostInTheTetons Dec 06 '16 at 21:17
You could extract all the code inside the `document.ready` function (the first function in the sample) into its own named function. This way, you can call that function, by name, again at any point that you wish. – Scott Marcus Dec 06 '16 at 21:30
So just break up the first function into it's own and then from timer = setInterval have it be it's own function? And then call the first function within the second one? – lostInTheTetons Dec 07 '16 at 21:07
Can you define for me what "once a user is active again" means? – Scott Marcus Dec 07 '16 at 21:14
When the user has made a mouse movement or clicked something on the page. – lostInTheTetons Dec 07 '16 at 21:23
@Teton-Coder See my updated answer with comments to address your current question. – Scott Marcus Dec 07 '16 at 21:31
Thank you. Much appreciated for all your help! – lostInTheTetons Dec 07 '16 at 21:36

score 2 · Answer 2 · answered Dec 06 '16 at 18:22

2

You can achieve this in a couple different ways. First I am going to assume you already have logic existing to check if a person has been idle for 5 minutes (as that makes answering this easier, :D)

What you can do is when you call setInterval, store it's result in a variable. At which point if the user becomes idle for 5 minutes, window.clearInterval(thatVariable) to end the loop.

Otherwise, change your logic to use setTimeout instead and have it recursively call itself so long as the user has not been idle for 5 minutes.

answered Dec 06 '16 at 18:22

Taplar

24,788
4
22
35

It looks like you are doing the clearInterval route. What exactly are you asking about? – Taplar Dec 06 '16 at 21:14
How could I get it to reset once a user is active again? – lostInTheTetons Dec 06 '16 at 21:16
Ah, well if you want to do that I would suggest putting that whole logic in a method. And then in the event that the user is active again you can call that method to start the whole process over again. – Taplar Dec 06 '16 at 21:17
any hints or tips on how to get that method started? Thanks for your help as well, much appreciated. – lostInTheTetons Dec 06 '16 at 21:18
You'd just call whatever method you stuck it in. If you put it in a method like function refreshShowText () { ... } then later when they go from inactive to active you'd just call refreshShowText() – Taplar Dec 06 '16 at 21:20

score 0 · Answer 3 · answered Dec 06 '16 at 18:23

0

<script type="text/javascript">
    setTimeout(function () { 
      location.reload();
    }, 60 * 1000);
</script>

setTimeout will reload the page after a specified number of milliseconds, hence 60 * 1000 = 1m. Also, since the page is being refreshed, the timeout will always be set on page load.

answered Dec 06 '16 at 18:23

Venkat

316
1
13

He's not doing a reload. He is 'refreshing' the content of '#show'. – Taplar Dec 06 '16 at 18:24

score 0 · Answer 4 · answered Dec 06 '16 at 18:31

An easy way is mix setInterval with setTimeout.

function refresh() {
    var randomnumber = Math.floor(Math.random() * 100);
    $('#show').text('I am getting refreshed every 10 seconds..! Random Number ==> ' + randomnumber);
}

var intervalId = setInterval(refresh, 10 * 1000);

setTimeout(function () {
    clearInterval(intervalId);
    alert('refresh stop!');
}, 5 * 60 * 1000);

How can I stop a page from refreshing after a certain amount of time javascript

4 Answers4