Javascript 具有设置间隔的启动/停止功能

我有一个简单的

setInterval

函数，用于单选按钮在加载时循环。
我想添加一个按钮，可以启动或停止循环。我为这个函数添加了click函数，但不知道以后如何停止它

以下是我到目前为止得到的信息：

此外，如果我连续多次单击该按钮，则循环会变得疯狂-请提供任何帮助：）

p、 我也检查过：
和

---

但是我不知道如何使用这些答案，因为我是javascript noob。

参考您的

setInterval

，这样您就可以使用

clearInterval（您的参考）

。 要启动/停止，可以添加额外的布尔变量来切换启动和停止

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

---

参考您的

setInterval

，这样您就可以使用

clearInterval（您的参考）

。 要启动/停止，可以添加额外的布尔变量来切换启动和停止

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

试试看

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

演示：

试试看

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

---

演示：

不带clearInterval的le解决方案

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

---

le无间隙溶液

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

---

这不会阻止它。。。这是停止重复间隔，但不是停止动画…这不会停止它。。。这是停止重复间隔，但不是停止动画…谢谢你，你的作品也很棒-希望我能给出2个公认的答案+1:）谢谢你，你的作品也很棒-希望我能给出两个公认的答案+1:）谢谢你的回答。这种方法比其他方法有什么优势吗？我不知道如果你每秒钟检查一次是否会更快。。。或者每次单击都生成计时器。那么您的代码应该更高效/优化？对不起，我不太了解javascript/jquery。我不知道。。。这只是另一种方式。我只知道，你在这些解决方案之间会有一点时间的转换：）谢谢你的回答。这种方法比其他方法有什么优势吗？我不知道如果你每秒钟检查一次是否会更快。。。或者每次单击都生成计时器。那么您的代码应该更高效/优化？对不起，我不太了解javascript/jquery。我不知道。。。这只是另一种方式。我只知道，在这些解决方案之间会有一点时间转换：）