jquery - 如何停止（clearInterval）每次按钮单击的setInterval

Question

我有 2 个框，第一个蓝色框必须开始向上移动箭头，效果很好，我希望第二个黄色框暂停箭头，但我无法实现。谢谢你的建议。

http://jsfiddle.net/Km7nw/3/

$(document).ready(function(){
    $('.box1').click(function () {
       setInterval(function(){
          $('.arrow').css("top", "-=20px");
       }, 400);

       //clicking on box2 must clearInterval

    });
});

Answer 1

您可以使用闭包变量来存储对区间的引用

$(document).ready(function () {
    var interval;
    $('.box1').click(function () {
        interval = setInterval(function () {
            $('.arrow').css("top", "-=20px");
        }, 400);
        //clicking on box2 must clearInterval
    });
    $('.box2').click(function () {
        clearInterval(interval)
    });
});

演示：小提琴

Answer 2

使用 clearInterval() 函数。

clearInterval(intervalID)

intervalID 是您要取消的重复操作的标识符。此 ID 从 setInterval() 返回。

因此，我们从 方法创建 id isetInterval 并将其传递给clearInterval

$(document).ready(function(){
var idToClear;
    $('.box1').click(function () {
        idToClear = setInterval(function(){
          $('.arrow').css("top", "-=20px");
       }, 400);
       //clicking on box2 must clearInterval
    }); 

     $('.box2').click(function () {
      clearInterval(i);
    }); 
});

注意：这里的一件重要的事情是idToClear，应该可用于button2 点击回调函数的范围。

这就是我们在button1点击之外声明的原因callback function.

工作演示

Answer 3

试试这个：

$(document).ready(function(){
    var interval; 
    $('.box1').click(function () {
       interval = setInterval(function(){
          $('.arrow').css("top", "-=20px");
       }, 400);       
    });

    $('.box2').click(function () {
       clearInterval(interval);      
    });    
});

在这里摆弄：http: //jsfiddle.net/Km7nw/4/

Answer 4

试试这个，

我认为您需要这种类型的功能。

$(document).ready(function(){
var IntID;
    $('.box1').click(function () {
       IntID = setInterval(function(){
          $('.arrow').css("top", "-=20px");
       }, 400);
       //clicking on box2 must clearInterval
    });

    $('.box2').click(function () {
         clearInterval(IntID);
 });
});