jquery - 调用 clearInterval 后如何使 setInterval 重新开始

Question

我想要达到的目标

您好，我正在尝试制作一个基本滑块，滑块应每 10 秒自动滑动一次，但是当用户单击下一张幻灯片按钮（.next）时，我希望它滑动到下一张幻灯片并重置 setInterval 计时器以启动从点击开始 10 秒

它目前在做什么

目前它正在自动滑动，但是一旦单击下一个按钮，它就会完全停止 setInterval 而不是重置 setInterval 计时器

var slideTimer;
var slideTimer = setInterval(nextSlide, 3000);


$(".next").click(function(){
    nextSlide();
});

function nextSlide() {
    $(".sliders img:first").appendTo(".sliders"); 
    $(".next").click(function(){
    clearInterval(slideTimer);
    });
};

标签： jquerysetinterval

Answer 1

如果你想暂停 10 秒，那么你可以试试这个：

// var slideTimer; // don't need this as you declare it below
var slideTimer = setInterval(nextSlide, 3000); // start slide show


$(".next").click(function(){
    clearInterval(slideTimer);  // clear the interval
    nextSlide();                // show the next slide
    setTimeout(function() {
      slideTimer = setInterval(nextSlide, 3000); 
    },7000); // start the interval in 7 seconds which will show in 10 seconds (3000+7000)
});

function nextSlide() {
    $(".sliders img:first").appendTo(".sliders"); // only need to append in this - don't need to rebind
};

如果您只希望间隔在 10 秒内恢复并且间隔为 10 秒，那么这就足够了：

// var slideTimer; // don't need this as you declare it below
var slideTimer = setInterval(nextSlide, 10000); // start slide show 10 secs


$(".next").click(function(){
    clearInterval(slideTimer);  // clear the interval
    slideTimer = setInterval(nextSlide, 10000);  // restart
});

function nextSlide() {
    $(".sliders img:first").appendTo(".sliders"); // only need to append in this - don't need to rebind
};