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

Question

スライドを自動的に循環させるコンテンツスライダーを実行しています（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()の違いはsetTimeout()が指定された遅延の後に一度だけ、あなたの関数を呼び出している間setInterval()は、各間隔で繰り返し、あなたの関数を呼び出すことです。

以下のコードでは、関数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 
}