Question

我有2个盒子，第一个蓝色盒子必须开始向上移动箭头，这很好，我想要第二个黄色框暂停箭头，但我无法实现它。谢谢你的建议。

$(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)
    });
});

演示：Fiddle

Answer 2

使用clearInterval()功能。

clearInterval(intervalID)

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

因此，我们从setInterval方法创建了id i 并将其传递给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.

之外宣布的原因

Working Demo

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

如何停止（clearInterval）每按一次按钮setInterval

4 个答案: