使用setInterval启动/停止功能

时间:2014-01-23 15:17:40

标签: javascript jquery html

我有一个简单的setInterval功能,可以让单选按钮循环加载 我想添加一个按钮,可以启动或停止循环。我已为该功能添加了单击功能,但之后不知道如何停止它。

这是我到目前为止所得到的:jsfiddle

此外,如果我连续多次点击该按钮,循环变为狂战士 - 任何有帮助的帮助:)

P.S。我也检查过:
start & stop / pause setInterval with javascript, jQuery
Javascript loop-problem with setTimeout/setInterval

但我在黑暗中想知道如何使用这些答案,因为我是javascript noob。

3 个答案:

答案 0 :(得分:3)

引用您的setInterval,以便您使用clearInterval(yourreference)。 要启动/停止,您可以添加一个额外的布尔变量来切换开始和停止。

var t;
var running = false;

$("#start-stop").click(function(){
    clearInterval(t);
    running = !running;
    if (!running) 
        return;
    t = setInterval(function(){
        $('.wrap input')
        .eq( ( $('input:checked').index() + 1 ) % 3 )
        .prop('checked',true);
    },1000);
});

Fiddle

答案 1 :(得分:2)

尝试

jQuery(function () {
    var timer;
    $("#start-stop").click(function () {
        if (timer) {
            clearInterval(timer);
            timer = undefined;
        } else {
            timer = setInterval(function () {
                $('.wrap input')
                    .eq(($('input:checked').index() + 1) % 3)
                    .prop('checked', true);
            }, 1000);
        }
    });
})

演示:Fiddle

答案 2 :(得分:1)

没有clearInterval的解决方案

jQuery(function () {
   var toggle = null;
    $("#start-stop").click(function () {
        if(toggle == null) {
            toggle = false;
            setInterval(function () {
                if(toggle)
                    $('.wrap input').eq(($('input:checked').index() + 1) % 3).prop('checked', true);
              }, 1000);
        }   
        toggle = !toggle;
    }); 
});

Fiddle HERE