I can't stop setInterval()

Question

    var radiobuttons = $('input[name="slider"]');
    radiobuttons.eq(0).prop( "checked", true );
    var defalutvar = 0;

   function ani(a) {             
    function animate() {        
    var currentbutton = radiobuttons.eq(a);
        currentbutton.prop( "checked", true );
        a = (a + 1) % radiobuttons.length; //0, then 1, then 2, then 0, then 1, then 2, then 0, ...
    }        
    var rollDemRadios = setInterval(animate,1000);
    }

    $( document ).ready(ani(defalutvar)); 


    $('#active label').click(function () {            
        clearInterval(rollDemRadios); 
    });

~~This is my code. I created a function ani to set a starting variable for a loop. Now i can't stop setInterval. Someone can help me?~~

Update:

    var radiobuttons = $('input[name="slider"]');
    radiobuttons.eq(0).prop( "checked", true );
    var defalutvar = 0;
    var negative = -1;

   function ani(a) {             
    function animate() {        
    var currentbutton = radiobuttons.eq(a);
        currentbutton.prop( "checked", true );
        a = (a + 1) % radiobuttons.length; //0, then 1, then 2, then 0, then 1, then 2, then 0, ...
    }
         var rollDemRadios = setInterval(animate,1000);
         $('#active label').click(function () {            
            clearInterval(rollDemRadios);  
        });
    }

    ani(0); 


    $('#active label').click(function () {
        i = $('input[name="slider"]:checked').index();
        ani(i);            
   });

Sorry. I will say clearly my idea. I am coding an java-based autoplay for a css-only slider. It will autoplay first then when I click a node it would stop and refresh with a new starting variable. My code is not working correctly, it continuouses at old position that it was running. It is my real problem. Sorry all.

This is because you have declared it inside a function and trying to clear it in another — Rajesh, Nov 22 '15 at 16:29
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope — Teemu, Nov 22 '15 at 16:45

score 1 · Answer 1 · edited May 23 '17 at 12:07

First off, you're doing it in Javascript, not Java.

Second, this is locally scoped:

var rollDemRadios = setInterval(animate,1000);

meaning it exists only within the context of the animate function.

To fix it, declare it globally and then just assign it a value inside the animate function. So, at the top of the code where you're declaring other variables, put this:

var rollDemRadios;

and then instead of:

var rollDemRadios = setInterval(animate,1000);

put just:

rollDemRadios = setInterval(animate,1000);

POST-UPDATE

The main problem is that you have two click event listener on #active label and when you click, it does clear the current interval, but it also creates a new one because it calls ani(i);. Not only that, but by calling ani(i); you're also creating a new set of listeners, which keep piling up and might cause your page to hang after a while. I'd suggest refactoring the ani function. Something like this:

var radiobuttons = $('input[name="slider"]');
radiobuttons.eq(0).prop("checked", true);
var defalutvar = 0;
var negative = -1;
var rollDemRadios;

function ani(a) {
  function animate() {
    var currentbutton = radiobuttons.eq(a);
    currentbutton.prop("checked", true);
    a = (a + 1) % radiobuttons.length; //0, then 1, then 2, then 0, then 1, then 2, then 0, ...
  }
  rollDemRadios = setInterval(animate, 1000);

}

ani(0);

$('#active label').click(function() {
  if (rollDemRadios) {
    clearInterval(rollDemRadios);
    rollDemRadios = false;
    $('#on').removeClass('active');
    $('#off').addClass('active');
  } else {
    i = $('input[name="slider"]:checked').index();
    ani(i);
    $('#off').removeClass('active');
    $('#on').addClass('active');
  }
});

// irrelevant styling
$('#on').addClass('active');

#on.active {color: green}
#off.active {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="slider">
  <input type="radio" name="slider">
  <input type="radio" name="slider">
</div>
<div id="active">
  <label>Toggle <span id="on">On</span>/<span id="off">Off</span>
  </label>
</div>

Sudipta Kumar Maiti · Answer 2 · 2015-11-22T17:16:50.563

variable rollDemRadios to be declared as global scoped variable as shown below, otherwise variable rollDemRadios is considered as undefined within clearInterval(rollDemRadios);

    var radiobuttons = $('input[name="slider"]');
    radiobuttons.eq(0).prop("checked", true);
    var defalutvar = 0;
    var rollDemRadios = null;

    function ani(a) {
        function animate() {
            var currentbutton = radiobuttons.eq(a);
            currentbutton.prop("checked", true);
            a = (a + 1) % radiobuttons.length; //0, then 1, then 2, then 0, then 1, then 2, then 0, ...
        }
        rollDemRadios = setInterval(animate, 1000);
    }

    $(document).ready(ani(defalutvar));


    $('#active label').click(function () {
        clearInterval(rollDemRadios);
    });

score 0 · Answer 3 · answered Nov 22 '15 at 17:08

var radiobuttons = $('input[name="slider"]');
    radiobuttons.eq(0).prop( "checked", true );
    //var defalutvar = 0; //is never used
    //var negative = -1; //is never used

   var rollDemRadios;
   function ani(a) {                 
      rollDemRadios = setInterval(function() {
        var currentbutton = radiobuttons.eq(a);
        currentbutton.prop( "checked", true );
        a = (a + 1) % radiobuttons.length;
      },1000);
    }

    $('#active label').click(function () {            
       clearInterval(rollDemRadios);  
    });
    ani(0); 


    $('#active label').click(function () {
        i = $('input[name="slider"]:checked').index();
        ani(i);            
   });

The doc to help you how to use setInterval.

I can't stop setInterval()

3 Answers3

POST-UPDATE