Prevent Javascript Page Reload

Question

I am using this javascript to auto refresh a page every 30 seconds.

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

I need to give users an option to disable this function at any time before the page is reloaded.

Note: this is for an admin panel, not a public website, and the requirement from the client is that the page auto refreshes, with an option to stop the refresh before it happens by clicking a button.

Is there any way to achieve this... That is.. disable the javascript before it executes?

score 8 · Accepted Answer · answered Nov 03 '16 at 21:41

8

clearTimeout() : Cancels a timeout previously established by calling setTimeout().

You're searching for clearTimeout() :

var refresh = window.setTimeout(function(){ document.location.reload(true); }, 30000);

$('body').on('click', '#my-button', function(){
    clearTimeout(refresh);
})

Hope this helps.

answered Nov 03 '16 at 21:41

Zakaria Acharki

66,747
15
75
101

1

Good answer! :) – Tom el Safadi Nov 03 '16 at 21:44

score 3 · Answer 2 · edited Nov 03 '16 at 22:40

3

Do the following:

reload = window.setTimeout(function(){ document.location.reload(true); }, 30000);

Or, if using jQuery,

$("#non-reload-button").click(function(){
  clearTimeOut(reload)
});

edited Nov 03 '16 at 22:40

answered Nov 03 '16 at 21:42

CATCODER DEV

71
4

score 3 · Answer 3 · answered Nov 03 '16 at 21:42

Do it this way:

var myVar;

function myFunction() {
    myVar = window.setTimeout(function(){ document.location.reload(true); }, 30000);
}

function myStopFunction() {
    clearTimeout(myVar);
}

You just have to call the myStopFunction in order to stop the auto reload.

score 2 · Answer 4 · answered Nov 03 '16 at 21:49

Below is code that will continue to execute every 500ms until you click the button to stop it. Just replace the 500 with the time you want and replace the console.log with what ever operation you wish to run. Hope this helps!

let auto_refresh_active = true;

const refresh = () => {
   window.setTimeout(e => {
     console.log('Hey, I am running! Click the button to stop me!')
     if(auto_refresh_active == true) refresh();
  }, 500) 
}
refresh();

document.querySelector('button').addEventListener('click', e => auto_refresh_active = false);

<button>stop running</button>

Prevent Javascript Page Reload

4 Answers4