我无法停止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); 
    });

这是我的代码。 我创建了一个函数ani来设置循环的起始变量。 现在我无法停止setInterval。 有人可以帮我吗？

更新：

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

抱歉。 我会说清楚我的想法。 我正在为仅css滑块编码基于Java的自动播放。 它会先自动播放，然后当我单击一个节点时它将停止并使用新的起始变量刷新。 我的代码无法正常工作，它在运行时的旧位置继续运行。 这是我真正的问题。 不好意思

Answer 1

首先，您使用Javascript而不是Java进行操作 。

其次，这是本地范围的：

var rollDemRadios = setInterval(animate,1000);

表示它仅存在于animate功能的上下文中。

要修复此问题，请全局声明它，然后在animate函数中为其分配一个值。 因此，在声明其他变量的代码顶部，输入以下内容：

var rollDemRadios;

然后代替：

var rollDemRadios = setInterval(animate,1000);

放在：

rollDemRadios = setInterval(animate,1000);

---

更新后

主要问题是您在#active label上有两个click事件侦听器，并且单击时确实清除了当前间隔，但是由于调用了ani(i); ，因此它还会创建一个新的间隔ani(i); 。 不仅如此，还可以通过调用ani(i); 您还将创建一组新的侦听器，这些侦听器会不断堆积，并可能导致页面在一段时间后挂起。 我建议重构ani函数。 像这样：

 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

变量rollDemRadios声明为全局范围的变量，如下所示，否则，在clearInterval(rollDemRadios);中，变量rollDemRadios被视为undefined 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);            
   });

该文档可帮助您如何使用setInterval 。