jQuery：停止和启动"setInterval"

Question

我的网站上有一个幻灯片，但有一个问题。

在这里，我的JS：

var size_ini = 1;
$(document).ready(function() {
    setInterval('$("#next").click()',10000)
    $("#next").click(function() {
        if(size_ini < 3);
        size_ini++;
        else
        size_ini = 1
        $(".sample").hide();
        $("#id" + size_ini).show();
        $(".comment" + size_ini).show();
        $(".comment_description" + size_ini).show();
    });
    $("#prev").click(function() {
        if(size_ini > 1)
        size_ini--;
        else
        size_ini = 3;
        $(".sample").hide();
        $("#id" + size_ini).show();
        $(".comment" + size_ini).show();
        $(".comment_description" + size_ini).show();
    });
});

如您所见，我有一个 10 秒的幻灯片计时器。我有一个上一个按钮和一个下一个按钮。因此，当我单击其中一个按钮时，计时器应该停止并重新启动。我已经尝试过"clearInterval"，但这不起作用。

谁能说出这是如何工作的。

这是小提琴。

Answer 1

小提琴演示

var size_ini = 1;
$(document).ready(function () {
    var timer = setInterval('$("#next").click()', 10000); //assign timer to a variable
    $("#next").click(function () {
        if (size_ini < 3) size_ini++;
        else size_ini = 1
        $(".sample").hide();
        $("#id" + size_ini).show();
        clearInterval(timer); //clear interval
        timer = setInterval('$("#next").click()', 10000); //start it again
    });
    $("#prev").click(function () {
        if (size_ini > 1) size_ini--;
        else size_ini = 3;
        $(".sample").hide();
        $("#id" + size_ini).show();
        clearInterval(timer); //clear interval
        timer = setInterval('$("#next").click()', 10000); //start it again
    });
});

Answer 2

如果要清除间隔，则需要将其分配给变量，那么可以轻松清除它 -

var myInterval = setInterval('$("#next").click()',10000);

然后像这样清楚——

clearInterval(myInterval);

清除间隔后，请确保重置它，如果您希望它继续，请再次将其分配给变量。

Answer 3

<button id="start">Start</button>
<button id="stop">Stop</button>
var timer;
$("#start").click(function() {
    timer = setInterval(function(){$("#next").trigger("click");},"500");
});
$("#stop").click(function() {
    clearInterval(timer);
});