javascript - 清除间隔按钮后 5 秒内再次设置间隔

Question

我正在做一个自动循环幻灯片的内容 slider (通过使用 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
}