我无法停止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.

Answer 1

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> 

Answer 2

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);
    });

Answer 3

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 .