经过一定时间后，如何停止刷新页面

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> 

Answer 1

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

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

Answer 3

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

Answer 4

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