지워진 후 settimeout 루프 자바 스크립트를 다시 시작하는 방법은 무엇입니까?

Question

나는 순수한 자바 스크립트 - CSS를 tuorial에 대해 쓴 일부 코드에 문제를 가지고 있었어요. 저는 자바 스크립트의 초보자입니다. 연습 할 때이 코드를 썼지 만, 클라이언트를 위해하는 일부 작업에는 완벽 할 것이라고 생각합니다. 슬라이드를 변경하려면 5 가지 기능이 있습니다. 첫 번째 기능은 onload로 시작한 다음 settimeout을 사용하여 다음 기능을 수행하고 다음 기능은 5까지, 다음 기능은 5까지 루프 기능을 사용하여 루프를 다시 시작합니다. 사용자가 일시 정지 (cleartimeout)를 누를 때까지. 내 문제는 어떻게 현재 슬라이드 (기능)에 머물고있는 동안 settimeout 루프를 다시 시작합니까? 참고 : 지금은 javascript를 사용하고 싶기 때문에 jquery 솔루션을 사용하지 않을 것입니다.

실제 슬라이드 쇼를 보려면 : http://fudgepants.com/beta/slideshow/ 그리고 거기에서 소스 코드를 보려면 F12 키를 누르십시오.

Answer 1

당신은 전화 기능을하는 제어하는 ​​별도의 기능을 만들 수 있습니다. showNextSlide()라고 부르 자.

이 기능은 자체에 사이클 1에서 5로 그것의 setTimeout을 호출하는 바인딩 변수를() 할 것이다 당신은 그냥 중단 된 곳은 아직 알 것이기 때문에 다시 함수를 호출해야 다시 시작합니다.

// keep a reference to the most recent setTimeout() call 
var timeOutId; 

function showNextSlide() 
{ 
    // initialize the bound variable for the first time 
    // this variable gets preserved upon subsequent calls 
    this.idx = this.idx || 0; 

    switch (this.idx) { 
     case 0: 
      // code to show slide 1 
      break; 
     case 1: 
      // show slide 2 
      break; 
     // etc. 
    } 

    // increase the counter and make sure it doesn't go over 4 
    // i.e. 0, 1, 2, 3, 4, 0, 1, 2, 3, 4 
    this.idx = (this.idx + 1) % 5; 

    // call me in 5 seconds 
    timeOutId = setTimeout(showNextSlide, 5000); 
}