ClearInterval 버튼을 사용한 후 5 초 후에 다시 setinterval

Question

Content Slider를 사용하면 슬라이드를 자동으로 순환시킵니다 (setInterval를 사용하여 "다음"기능을 주기적으로 호출하십시오). 사용자가 이전 / 다음 버튼을 사용하여 이전 / 다음 버튼을 사용하여 Prev / Next 버튼을 클릭하면 중지됩니다.버튼을 클릭하는 데 몇 초 후에 clearInterval를 다시 사용할 수있는 방법이 있습니까?

코드 :

// 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

Put your setInterval in a function and then call that function with setTimeout().

The difference between setInterval() and setTimeout() is that setInterval() calls your function repeatedly at each interval, while setTimeout() calls your function only once after the specified delay.

In the code below I've added a function startCycle(). Call that function to, well, start the cycle, both immediately so that it starts automatically and from a timeout set within your existing stopCycle() function.

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
}