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

首先，你正在做in Javascript, not Java。

其次，这是本地范围的：

var rollDemRadios = setInterval(animate,1000);

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

要修复它，请全局声明它，然后在animate函数内为其赋值。因此，在您声明其他变量的代码顶部，请输入：

var rollDemRadios;

然后代替：

var rollDemRadios = setInterval(animate,1000);

只是：

rollDemRadios = setInterval(animate,1000);

POST-UPDATE

主要问题是您在#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>

Answer 2

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

The doc可以帮助您使用setInterval。

我无法停止setInterval（）

3 个答案:

POST-UPDATE