매번 setInterval()주기가 더 빨라지는 이유는 무엇입니까?

Question

자바 스크립트에서 맞춤 슬라이더를 만들고 있는데, 사용자가 슬라이더의 div를 클릭 할 때마다 슬라이더가 X 초 동안 정지해야합니다.

$(document).ready(function() { 
    var ciclo; 
    var index_slide = 1; 

    function startSlidercicle() { 
     ciclo = setInterval(function() { 
      // Slider code goes here 
     }, 3000); 
    } 

    //Here I start the slider animation 
    startSlidercicle(); 

    //When the user clicks on a div called 'slide', stop the cycle and start again the animation cycle 
    $('.slide').on('click', function() { 
     clearInterval(ciclo); 
     setTimeout(startSlidercicle(), 3000); 
    }); 
}); 

그러나 문제는 내가 클릭하고 슬라이더를 중지하는 것이 매번는,주기가 빨라 시작이다 :

내 코드입니다. 어떻게 해결할 수 있습니까? 이에

clearInterval(ciclo); 
setTimeout(startSlidercicle(), 3000); 

:

Answer 1

는

clearInterval(ciclo); 
startSlidercicle(); 

을 이제 슬라이더는 잘 작동합니다 :

clearInterval(ciclo); 
setTimeout(startSlidercicle, 3000); 

내가 할 코드를 변경했습니다. 처음 두 제안에서 div를 클릭 할 때마다 기존 함수에 "겹쳐진"새 함수가 만들어 졌으므로 슬라이더 속도가 올라가는 것처럼 보이지만 처음부터 다시 시작합니다. 다른.

Answer 2

는이 작업을 변경해야

clearInterval(ciclo); 
setTimeout(startSlidercicle, 3000); 

을 기존의 코드를 즉시 startSlidercirle를 호출에서하고 있기 때문에 그것은 setTimeout() 화재 때까지 대기하지 않습니다 함수 이름 뒤에 (). 즉, 즉시 실행하고 실행 결과를 setTimeout()으로 전달하는 것을 의미합니다. 함수 참조를 에 전달하면 함수 이름 뒤에 ()이 없기 때문에 수행됩니다. 이것은 흔한 실수입니다.

clearInterval(ciclo); 
setTimeout(startSlidercicle(), 3000); 

나 : 대신