Question

我对此代码有一些问题，当我点击开始按钮时，一切都按预期工作但当我想用clearInterval停止动画时它不起作用，只是保持循环...我是什么做错了？

 var a = function() { 
     $("div").animate({height:300},"slow");
     $("div").animate({width:300},"slow");
     $("div").animate({height:100},"slow");
     $("div").animate({width:100},"slow");
 }

 $(document).ready(function(){
     $("start").click(function(){

         setInterval(a,1000);
     });

     $("stop").click(function(){
         clearInterval(a);

     });

 });

Answer 1

您应该将引用（从setInterval获得）传递给clearInterval方法以清除它。试试这个

var intervalId;
var a = function() { 
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
}

$(document).ready(function(){
    $("#start").click(function(){
        intervalId = setInterval(a,1000);
    });

    $("#stop").click(function(){
        clearInterval(intervalId);
    });

});

Answer 2

“setInterval（）”函数返回值。这就是你需要传递给“clearInterval（）”的东西，而不是对处理程序的引用。

Answer 3

<强> HTML

<div style="height:310px;width:310px;">
    <div id="div" style="width:100px;height:100px;background-color:#000">
    </div>
</div>

<input type="button" id="start" value="start">
<input type="button" id="stop" value="stop">

<强> JQUERY

var startInterval;

$(document).ready(function(){
     var a = function() { 
         $("#div").animate({height:300},"slow");
         $("#div").animate({width:300},"slow");
         $("#div").animate({height:100},"slow");
         $("#div").animate({width:100},"slow");
     }
     $("#start").click(function(){
         startInterval=setInterval(a, 2500);
     });

     $("#stop").click(function(){
         clearInterval(startInterval);
     });
});

请查看此内容以获取参考jsfiddle

Answer 4

这适合你吗？

var chk =  setInterval(a,1000);
then
clearInterval(chk);

clearInterval不起作用？

4 个答案: