clearIntervalボタンの5秒後に再びsetInterval

Question

私は自動的にスライドを循環させるコンテンツスライダーをやっています（定期的に"next"関数を呼び出して 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
}