在clearInterval按钮后5秒内再次设置interval

Question

我正在做一个自动循环幻灯片的内容滑块（通过使用 setInterval），但当用户点击prev/next按钮时停止（通过使用 clearInterval 上的prev/next按钮）。有没有办法使用 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
}