javascript - 在 clearInterval 按钮后 5 秒内再次 setInterval

Question

我正在做一个自动循环幻灯片的内容滑块（通过定期调用“下一个”函数使用setInterval）但是当用户单击上一个/下一个按钮时停止（通过使用clearInterval上一个/下一个按钮）。setInterval点击按钮几秒钟后有没有办法再次使用？

代码：

// start to automatically cycle slides
var cycleTimer = setInterval(function () {
   $scroll.trigger('next');
}, 450);

// set next/previous buttons as clearInterval triggers 
var $stopTriggers = $('img.right').add('img.left'); // left right

// function to stop auto-cycle
function stopCycle() {
   clearInterval(cycleTimer); 
}

Answer 1

将您setInterval放入一个函数中，然后使用setTimeout().

setInterval()和之间的区别在于setTimeout()在setInterval()每个间隔重复调用您的函数，而setTimeout()在指定的延迟后仅调用您的函数一次。

在下面的代码中，我添加了一个函数startCycle()。调用该函数以立即启动循环，以便它自动启动并从现有stopCycle()函数中设置的超时开始。

var cycleTimer;

function startCycle() {
   cycleTimer = setInterval(function () {
      $scroll.trigger('next');
   }, 450);
}

// start to automatically cycle slides
startCycle();

// set next/previous buttons as clearInterval triggers 
var $stopTriggers = $('img.right').add('img.left'); // left right

// function to stop auto-cycle
function stopCycle() {
   clearInterval(cycleTimer);
   setTimeout(startCycle, 5000); // restart after 5 seconds
}