CODEWITHSUNDEEP
javascriptjquery
Luke Jennings
Luke Jennings

Reputation: 39

Button to refresh page every second/minute etc?

I'm wanting a button that when clicked will refresh the current page after a specified amount of time.

I currently have:

<script type="text/javascript">
  setTimeout(function reload(){
    location = ''
  },1000)
</script>

<button onclick="reload()">Reload</button>

However, that JUST reloads the page without even having to click the button. I'm wanting the button to execute the script, and also a button to STOP the page reload.

This should be really simple but I can't figure it out :(

******EDIT**********

I'd also like the script to run on an infinite loop after the button is clicked.

Upvotes: 3

Views: 4002

Answers (4)

epascarello
epascarello

Reputation: 207547

What you wrote is 

window.setTimeout("location = ''"; ,1000);

You were saying execute this function after 1 second. You need to define the setTimeout inside the function. Also there is a built in method to reload the page. Call that instead of setting the location to a blank string. 

function reload() {
    setTimeout( function() {
        window.location.reload(true);
    },1000);
}

Now to cancel the timeout, you need to use clearTimeout(timeoutId); You get the timeoutId from the integer that the setTimeout returns when you call it. 

var timer = null;
function reload() {
    timer = window.setTimeout( function() {
        window.location.reload(true);
    },1000);
}

function cancelReload() {
    if (timer)  {
        window.clearTimeout(timer);
    }
    timer = null;
}

AND you said you want it to keep running. That will require cookies or localstorage.

var timer = null;
function reload() {
    localStorage.reload = true;  //set localstorage so we know to fire it off again
    timer = window.setTimeout( function() {
        window.location.reload(true);
    },1000);
}

function cancelReload() {
    if (timer)  {
        window.clearTimeout(timer);
    }
    timer = null;
   localStorage.removeItem("reload");  //remove the key in localstorage
}

if (localstorage.reload) {  //check localstorage to see if key is set
    reload();
}

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337700

Your setTimeout is called on page load. You need to put it inside the reload() function:

function reload() {
    setTimeout(function() {
        window.location.reload();
    }, 1000);
}

To make the timer run every x seconds and reload only a part of the page you would need to use setInterval and an AJAX request, something like this:

var timer;
function reload() {
    timer = setInterval(function() {
        $.post('foo.html', function(data) {
            $('#bar').html(data);
        });
    }, 1000);
}

function clear() {
    clearInterval(timer);
}

Upvotes: 6

Catwood
Catwood

Reputation: 157

You need to wrap the whole thing in another function and call that from the button click

Upvotes: 0

andrex
andrex

Reputation: 1032

This should do the trick

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

<button onclick="reload()">Reload</button>

Upvotes: 2

Related Questions