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 
}