我无法停止 setInterval(）

I can't stop setInterval()

本文关键字：setInterval 无法停止      更新时间：2023-09-26
    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 来设置循环的起始变量。现在我无法停止设置间隔。有人可以帮助我吗？

更新：

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

首先，你是在Javascript中做的，而不是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>

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的文档。

变量rollDemRadios声明为全局范围的变量，如下所示，否则变量rollDemRadios被视为clearInterval(rollDemRadios);中的undefined 

    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);
    });
相关文章：