Javascript auto page refresh code

Question

this is the code that comes in head section and it will automatically refresh the whole page in 1 min as i put 6000 in the code below

<script type="text/javascript">
setTimeout('window.location.href=window.location.href;', 6000);
</script>

is there any way for example, when there's 10 seconds left to refresh the page then, a button will display and say "Click here to reset timer" and it will reset that timer to 1 min again?

Use window.setInterval() instead

user2575725
– user2575725

2015-01-31 04:38:00 +00:00
Commented Jan 31, 2015 at 4:38 — user2575725
– user2575725, Commented Jan 31, 2015 at 4:38
can you please be more clear?

user3600217
– user3600217

2015-01-31 04:47:24 +00:00
Commented Jan 31, 2015 at 4:47 — user3600217
– user3600217, Commented Jan 31, 2015 at 4:47

Hemant · Accepted Answer · 2015-01-31 06:27:52Z

1

  <script language="javascript">
        var timeout,interval
         var threshold = 15000;
        var secondsleft=threshold;
        startschedule();

        window.onload = function()
        {
            startschedule();
        }

         function startChecking()
         {
            secondsleft-=1000;
            if(secondsleft <= 10000)
            {
                document.getElementById("clickme").style.display="";
                document.getElementById("timercounter").innerHTML = Math.abs((secondsleft/1000))+" secs";  
            }
        }
        function startschedule()
        {
              clearInterval(timeout);
              clearInterval(interval);
              timeout = setTimeout('window.location.href=window.location.href;', threshold);
              secondsleft=threshold;
               interval = setInterval(function()
               {
                   startChecking();
               },1000)              
            }

            function resetTimer()
            {
            startschedule();
            document.getElementById("clickme").style.display="none";
            document.getElementById("timercounter").innerHTML="";
             }
    </script>
            Please wait...<span id="timercounter"></span>
            <button id="clickme" style="display:none;" onclick="javascript:resetTimer();">Click here to reset timer</button>

edited Jan 31, 2015 at 6:27

answered Jan 31, 2015 at 4:56

Hemant

2,0692 gold badges14 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3600217 Over a year ago

this 2 words "Thank You" is not really enough to say. i been looking for this since long time now you only solved my problem. thank you so much sir.

user3600217 Over a year ago

and there's 1 more small thing if you can help me about it. it's almost the same way, now here when 10 seconds left , it will display the button to reset timer. is there any way to make like for example, when 10 seconds left, that last 10 seconds much be showing as countdown text like, 10, 9, 8, etc on the page. and when it's 0 then the page must refresh. i need all that in this same code you give me. thanks again

user3600217 Over a year ago

i don't know how to message you my friend. can you please check my question at this link and if it's possible to answer me please stackoverflow.com/questions/28261727/…

ced-b · Accepted Answer · 2015-01-31 17:40:52Z

1

Assuming you have the following html for the button:

<button id="cancel-reload-button" style="display: none" onclick="cancelReload()">Cancel Reload</button>

And this as the script (Note: this gives the idea, but is not neccesarily fully tested):

// Variable for holding the reference to the current timeout
var myTimeout;

// Starts the reload, called when the page is loaded.
function startReload() {
   myTimeout = setTimeout(function() {

       document.getElementByID("cancel-reload-button").style.display = "inline";

       myTimeout = setTimeout(function() {
           window.location.reload();
       } 10000)

   }, 50000);
}

// Cancel the reload and start it over. Called when the button is
// clicked.
function cancelReload() {
    clearTimeout(myTimeout)
    startReload()
}

// On page load call this function top begin.
startReload();

I created two functions, one for starting the reload and the second one for cancelling it.

Then I assigned the timeout to the variable myTimeout which can be used to later cancel the timeout.

Then I called myTimeout twice - Once for 50 secs, at which point it shows the button and once for 10 secs after which it finally reloads.

edited Jan 31, 2015 at 17:40

answered Jan 31, 2015 at 4:54

ced-b

4,0371 gold badge31 silver badges40 bronze badges

1 Comment

John Bupit Over a year ago

Shouldn't it be style=display: none instead of hidden?

Polynomial Proton · Accepted Answer · 2015-01-31 04:53:39Z

0

How about below? If you click on OK to reset timer, it would keep giving the confirm box every 50 seconds. If you click cancel, it will refresh the page in 10 seconds.

setInterval(function(){ var r = confirm("Reset Timer");
if (r == true) {
 setTimeout('window.location.href=window.location.href;', 60000);
} else {
   setTimeout('window.location.href=window.location.href;', 10000);
}
}, 50000);

Note: In your question you specified 1 minute, but your code works for 6 seconds(6000 -- > 6 seconds not 60 seconds) I have included for a minute

answered Jan 31, 2015 at 4:53

Polynomial Proton

5,18023 silver badges37 bronze badges

Comments

Gustavo Ayala · Accepted Answer · 2015-01-31 04:59:36Z

You can use 2 setTimeout calls, one to make the "Reset" button show up and another one for the refresh timer reset. The trick is to store the second setTimeout on a global variable and use clearTimeout to reset it if the button is pressed. Here is some JavaScript code to illustrate:

<script type="text/javascript">

var autoRefreshTime = 30 * 1000; // 60000ms = 60secs = 1 min
var warningTime = autoRefreshTime - (10 * 1000); // 10 secs before autoRefreshTime

waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
warningTimeout = setTimeout('ShowResetButton();', warningTime);

function ShowResetButton() {
    // Code to make the "Reset" button show up
}

// Make this function your button's onClick handler
function ResetAutoRefreshTimer() {
    clearTimeout(waitTimeout);
    waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
}
</script>

Jordan · Accepted Answer · 2015-01-31 05:02:49Z

0

The way I would do it is make a function with a timeout, and invoke that function

<script type="text/javascript">
    var refreshFunc = function(){
      setTimeout(function(){
                     var r = confirm("Do you want to reset the timer?");
                     if(r === false){
                       window.location.href=window.location.href;
                     }else{
                       refreshFunc();
                     }
                  }, 6000);
    };
    refreshFunc();
</script>

One big problem with using confirm in this case is you cannot program it to reject. You would have to implement you own modal/dialog box so you can auto reject in 10 seconds.

edited Jan 31, 2015 at 5:02

answered Jan 31, 2015 at 4:53

Jordan

2,0792 gold badges19 silver badges19 bronze badges

Comments

score 0 · Accepted Answer · 2015-01-31 05:03:25Z

0

Try using setInterval():

var time;

$(function() {
  time = $('#time');
  $('#reset').on('click', reset);
  start();
});

var timer, left;

var start = function() {
  left = +(time.text()); //parsing 
  timer = setInterval(function() {
    if (0 <= left) {
      time.text(left--);
    } else {
      clearInterval(timer);
      location.replace(location);
    }
  }, 1000);
};

var reset = function() {
  if (timer) {
    clearInterval(timer);
  }
  time.text('59');
  start();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1><span id='time'>59</span> second(s) left</h1>
<input id='reset' value='Reset' type='button' />

edited Jan 31, 2015 at 5:03

answered Jan 31, 2015 at 4:57

user2575725

Collectives™ on Stack Overflow

Javascript auto page refresh code

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related