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

setInterval again in 5 seconds after clearInterval button

本文关键字：设置 Interval 5秒 clearInterval 按钮      更新时间：2023-09-26

我正在做一个内容滑块，它可以自动循环幻灯片（通过使用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); 
}

将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
}
相关文章：