Why toggling a setInterval() which changes a image source is only decreasing the interval time after each toggle?

Question

I tried to toggle the setInterval() function by clicking on an image. On first click it will start to change the image with a time interval that we set. But after the second click the setInterval() function is not being stopped (which I wanted), instead the interval reduces. And the interval keep on reducing after each click. Which means it is not toggling properly. Here is the code:

<!DOCTYPE html>
<html>
<head>
<title>Learning JavaScript</title>
<script type="text/javascript">
var settimer;
var stop;

function change_timer(){
    if(settimer==="on"){
        clearInterval(stop);                 
        var settimer="off";
       }
    else{
         var stop=setInterval('change()',2000);
         var settimer="on";
       }
    }

function change(){
    var img=document.getElementById('browser');             
    if(img.src==="http://localhost:8383/JavaScript/firefox.jpg")               
      {img.src="chrome.jpg";}    
      else{img.src="firefox.jpg";}
    }
</script>
</head>
<body>
<img src="firefox.jpg" alt='browser' id='browser' onclick='change_timer();'>
<p>Click on image to set timer on or off</p> 
</body>
</html>

From the code snippet it looks like you are declaring a new local versions of the 'stop' and 'settimer' variables each time so the global 'stop' and 'settimer' variables never get assigned to... — Neil Hibbert, Jun 15 '17 at 10:43
You're "hiding" the `settimer` and `stop` variables of the global scope with those in the `change_timer` function (https://stackoverflow.com/questions/5373278/variable-shadowing-in-javascript) — Andreas, Jun 15 '17 at 10:44
thanks. I think that was the issue. I am just a noob in javascript. Declared the variable unnecessarily each time. — Adeeb Abdul Salam, Jun 15 '17 at 11:12

score 1 · Answer 1 · answered Jun 15 '17 at 10:56

Here's a working example for your problem

var settimernow="off";
var stop;

function change_timer(){
   if(settimernow==="on"){
      clearInterval(stop);                 
      settimernow="off";
   }
   else{
      stop=setInterval('change()',2000);
      settimernow="on";
       }
}
        
function change(){
      var img=document.getElementById('browser');             
      if(img.src==="https://www.w3schools.com/css/trolltunga.jpg")         {
        img.src="http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg";
      }    
      else
      {
          img.src="https://www.w3schools.com/css/trolltunga.jpg";
      }
}

<body>
<img src="http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg" alt='browser' id='browser' width="100px" height="100px" onclick='change_timer();'>
<p>Click on image to set timer on or off</p> 
</body>

score 1 · Accepted Answer · answered Jun 15 '17 at 11:06

This line

var stop=setInterval('change()',2000);

... creates a new, locally scoped variable stop instead of assigning to the one you created in the outer scope, so when you later run clearInterval(stop) (in a new 'instance' of the function with a new scope) you're not clearing the interval you created previously.

The same goes for the settimer variable.

Simply remove the var keyword from those lines in the change_timer() function and it will work as intended.

Why toggling a setInterval() which changes a image source is only decreasing the interval time after each toggle?

2 Answers2