자바 스크립트 슬라이드 쇼 버그 (Scriptaculous 기반)

Question

아래의 슬라이드 쇼 코드에는 "이전"및 "다음"링크를 누르는 기능이 있습니다. "다음"은 잘 작동하고, 계속 누르고 있으면 모든 슬라이드가 반복됩니다.

"이전"은 다소 엉망입니다. 몇 가지 이유가 있습니다. 슬라이드 나 2 개가 돌아 오지만 그냥 비어있게됩니다.

도와 주시겠습니까? 감사합니다.

<script type="text/javascript"> 
    start_slideshow(1, 3, 3000); 

    var currentSlide = 1; 

    function start_slideshow(start_frame, end_frame, delay) { 
     id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay); 
    } 

    function switch_slides(frame, start_frame, end_frame, delay) { 

     return (function() { 

      Effect.Fade('slide' + frame, { duration: 1.0 }); 

      if (frame == end_frame) { 
       frame = start_frame; 
       currentSlide = frame; 
      } else { 
       frame = frame + 1; 
       currentSlide = frame; 
      } 

      Effect.Appear('slide' + frame, { duration: 1.0 }); 

      if (delay == 1000) { 
       delay = 3000; 
      } 

      id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay); 
     }) 
    } 

    function stop_slideshow() { 
     clearTimeout(id); 
    } 

    function next_slide() { 

     clearTimeout(id); 

     Effect.Fade('slide' + currentSlide, { duration: 1.0 }); 

     if (currentSlide == 4) { 
      currentSlide = 0; 
     } 

     currentSlide = currentSlide + 1; 
     Effect.Appear('slide' + currentSlide, { duration: 1.0 }); 
     id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay); 
    } 

    function previous_slide() { 

     clearTimeout(id); 

     if (currentSlide == 0) { 
      currentSlide = 1; 
     } else { 
      Effect.Fade('slide' + currentSlide, { duration: 1.0 }); 

      currentSlide = currentSlide - 1; 
      Effect.Appear('slide' + currentSlide, { duration: 1.0 }); 
      id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay); 
     } 
    } 

</script> 

Answer 1

나는 이와 같은 문제가 있거나 이와 유사합니다. 현재 대기중인 효과가 끝나기 전에 이전 또는 다음 버튼을 "빠르게"클릭한다고 가정합니다. 이것에 의해, 복수의 영향을받는 요소가 동시에 적용되는 결과로 에러가 발생합니다.

이 문제를 해결하기 위해 scriptaculous를 사용하면 효과를 순서대로 대기시킬 수 있습니다. 여기에서 문서 참조 : http://wiki.github.com/madrobby/scriptaculous/effect-queues

기본적으로 효과에 범위를 추가해야합니다. 따라서 기간을 추가 한 후에는 대기열 범위를 추가해야합니다.

예 :

Effect.Fade('slide' + currentSlide, { duration: 1.0, queue: { scope: 'slide_show' } }); 

이이 버튼을 누를 때 우리가 큐에 아무것도 취소 할 수 있습니다.

var queue = Effect.Queues.get('slide_show'); 
queue.each(function(effect) { effect.cancel(); }); 

이것은 블랭킹을 수정할 가능성이 있지만 그렇지 않을 수도 있습니다. 그럼에도 불구하고이 방법을 슬라이드 쇼에 사용해야합니다.)

문제가 해결되지 않으면 다시보고하고 더 많은 문제 해결을 수행 할 것입니다.