在clearInterval按鈕后的5秒內再次設置setInterval

Question

我正在做一個自動循環幻燈片的內容滑塊（通過使用setInterval定期調用“next”函數），但是當用戶單擊prev / next按鈕時（在prev / next按鈕上使用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
}