'Change body onLoad on img click

I have a page that has a tag <body onload="setInterval('window.location.reload()', 60000);"> that causes the page to refresh every 1 minute.

I want to make a button (PAUSE) that, when clicked, cancels the refresh.

I have tried the following, but it does not work:

window.onload= function () {};


Solution 1:[1]

It's better if you put your scripts in a function so that you can call it from other places too.

Like this...

<html>
<head>
    <script type="text/javascript">
        var intervalRef;   
        function ResumeRefresh(interval){
            intervalRef = setInterval('window.location.reload()', interval);
        }
        function StopRefresh(){
            intervalRef=window.clearInterval(intervalRef);
        }
    </script>
</head>
<body onload="ResumeRefresh(60000);">
    <input type="button" val="Stop Refreshing" onclick="StopRefresh();"></input>
</body>

Solution 2:[2]

You can call clearInterval() like this

id = setInterval('func', time);
<button onlcick="clearInterval(id)">Pause</button>

clearInterval() is a method in the window object which CLEARS your setInterval()

Here's a link with more information

Solution 3:[3]

You will need something like this:

<script>
var reloadInterval;
var run = true;
function setMyInterval()
{
   reloadInterval = setInterval('window.location.reload()', 60000);
}
function Pause()
{
   if(run)
   {
      clearInterval(reloadInterval);
   }
   else 
   {
      reloadInterval = setInterval('window.location.reload()', 60000);
   }
}
</script>

html:

<body onload = 'setMyInterval()'>
<button onlcick="Pause()">Pause / Play</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Guganeshan.T
Solution 2
Solution 3 nunespascal