javascript - 我无法停止setInterval()

    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的自动播放。它会先自动播放，然后当我单击一个节点时它将停止并使用新的起始变量刷新。我的代码无法正常工作，它在运行时的旧位置继续运行。这是我真正的问题。不好意思

最佳答案

首先，您正在执行in Javascript, not Java。

其次，这是本地范围的：

var rollDemRadios = setInterval(animate,1000);

意味着它仅存在于animate函数的上下文中。

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

var rollDemRadios;

然后代替：

var rollDemRadios = setInterval(animate,1000);

放在：

rollDemRadios = setInterval(animate,1000);

更新后

主要问题是在#active label上有两个单击事件侦听器，单击时确实清除了当前间隔，但由于调用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>