CODEWITHSUNDEEP
javascriptjqueryhtml
lostInTheTetons
lostInTheTetons

Reputation: 1222

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

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>

Upvotes: 0

Views: 3382

Answers (4)

Scott Marcus
Scott Marcus

Reputation: 65808

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

Upvotes: 3

rogeriolino
rogeriolino

Reputation: 1135

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

Upvotes: 0

Venkat
Venkat

Reputation: 314

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

Upvotes: 0

Taplar
Taplar

Reputation: 24965

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.

Upvotes: 2

Related Questions