setInterval은 처음에만 작동합니다

Question

setTimer을 사용하여 간단한 jQuery를 사용하여 슬라이드 쇼를 애니메이션으로 만들려고합니다. 나는 사용자에게 쇼를 시작하기 위해 클릭 한 다음 일시 중지 버튼으로 전환하는 단추 배경 이미지가있는 "DIV"형식의 단추를 사용자에게 제공합니다. 슬라이드는 매 3 초마다 변경됩니다. 다음은 관련 코드입니다.

playLink = $('<div id="lbPlayLink" />').click(function(){ 
      $(playLink).hide(); 
      $(pauseLink).show(); 
      slideInterval = setInterval(function(){next()}, 3000) 
    })[0]; 
    pauseLink = $('<div id="lbPauseLink" />').click(function(){ 
      $(playLink).show(); 
      $(pauseLink).hide(); 
      clearInterval(slideInterval); 
    }).hide()[0]; 

next() 함수 호출은 다음 슬라이드로 대체하는 작업을 수행합니다. 이 함수를 체크 아웃하고 그것을 완벽하게 작동합니다 (동 기적으로), 즉, setInterval에 의해 비동기 적으로 호출되면 처음에는 버튼을 클릭 한 후 3 초가 지나면 작동하지만 결코 절대로 작동하지 않습니다. 3 초 후에 다시 불러야한다고해도 다시 전화했다. 함수의 시작과 끝에서 "경고"호출을 호출 할 때 호출되지 않는다는 것을 알고 있습니다.

내가 alert('test')와 setInterval에서 next() 전화를 교체 할 경우 다음 나는 setInterval 그것이하도록되어 무엇을하고있다 볼 수 있습니다. 나는 삶의 이유로 나를 볼 수 없다. alert()은 괜찮지 만, next()은 기능의 "범위"와 관련이없는 한 그렇지 않다. 그러나 그 경우 처음으로 왜 작동 하는가?

파이어 버그로 코드 디버깅을 시도했지만이 같은 타임 아웃 기능으로는 도움이되지 않습니다. Firefox 나 IE8 모두 오류 메시지를 표시하지 않습니다.

여기 및 다른 곳의 setInterval에있는 여러 게시물을 살펴 보았지만 아직 시도하지 않은 내용은 볼 수 없습니다. 나는 지금 약 3 시간 동안 실험을 해왔고 내 머리 속을하고있다. 누구든지 내가 다음에 시도 할 수있는 것을 제안 할 수 있을까?

CSS의 :

Answer 1

명확히하려면 :

Ivo의 제안에 하나의 버튼 ("BUTTON"이 아닌 "DIV"요소의 형태 임)이 있었지만이 버튼의 클래스를 "lbPlay"와 "lbPause"사이에서 변경하여 배경 이미지를 변경했습니다 올바른 동작을 트리거합니다.

나의 주요 문제는 내가 모르는 사이에이 버튼에 이벤트를 여러 번 설정하고 이것이 이상한 행동을 일으킨다 고 생각했다는 것입니다.

"setInterval"호출의 리턴 코드를 jQuery "data"메소드를 사용하여 DIV에 첨부 된 변수 ("ppHandler")에 넣음으로써 그 결과를 얻었습니다.

새로운 코드는 다음과 같습니다 응답 모든 사람에게

if (typeof($(playPauseLink).data('ppHandler')) == 'undefined'){ 
    $(playPauseLink).click(function(){ 
     var $this = $(this); 
     if ($this.hasClass('lbPlay')) { 
      if ($this.data('ppHandler') != -1) clearInterval($this.data('ppHandler')); 
      $this.data('ppHandler', setInterval(function(){next();}, slideInterval*1000)); 
      $this.removeClass('lbPlay').addClass('lbPause'); 
     } else { 
      if ($this.data('ppHandler') != -1) clearInterval($this.data('ppHandler')); 
      $this.data({ppHandler: -1}); 
      $this.removeClass('lbPause').addClass('lbPlay'); 
     } 
    }); 

감사합니다. 최종 결과를 보려면 "www.trips.elusien.co.uk"로 이동하여 "slimbox 예제"링크를 클릭하고 "예제 9"로 이동하십시오.

Answer 2

흠, 나는 오히려 (작동 있는지 확실하지 않습니다, 아직 테스트하지) 다음과 같은 뭔가를 제안, 그것은 매우 읽을 수 없습니다, 당신은 코드를 작성하는 방식을 좋아하지 않는다 :

#slides{ 
    /* So you can position your elements under the div#slides */ 
    position: relative; 
} 

.button { 
    width: 50px; 
    height: 10px; 

    /* So you can position your button anywhere you like */ 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
} 

.play { 
    background:url(..) no-repeat; 
} 

.pause { 
    background:url(..) no-repeat; 
} 

html로 슬라이드에 관한 모든 것을 잡고 부모 slides로 구성하고, controller는, 기본적 버튼 이미지를 보유하고 있습니다.

<div id="slides"> 
    <div id="controller" class="button play"></div> 
</div> 

코드 :

(function() { 

    //Let's wrap everything in an anonymous function, so to avoid variable confusion 

    function next() { 
     //Assume this is your code doing the sliding. I don't touch 
    } 

    var invt; 

    function play() { 
     //Always clear interval first before play 
     if (invt) clearInterval(invt); 
     invt = setInterval(function() { 
      next(); 
     }, 3000); 
    } 

    function pause() { 
     if (invt) clearInterval(invt); 
    } 

    $(document).ready(function() { 
     $('#controller').click(function() { 

      //It's not playing so it has the play class 
      if ($(this).hasClass('play')) { 
       $(this).removeClass('play').addClass('pause'); 
       pause(); 
      }else{ 
       $(this).removeClass('pause').addClass('play'); 
       play(); 
      } 
     }); 
    }); 
})(); 

Answer 3

변화 모두에이 라인 :

$('<div id="lbPlayLink" />').click(function(){ 

에 : 나는 문제를 해결하는 방법

$('<div id="lbPlayLink" />').live("click", function(){