jQuery setTimeout issue

Question

나는 crossfading하여 많은 이미지를 움직이게하는 간단한 함수를 가지고있다. 간단한 배너 회전. 함수를 설정하여 animateSlideshow("play")을 호출하면 타임 아웃을 설정하고 애니메이션을 시작해야하며 animateSlideshow("stop")을 호출해야합니다.

그러나 stop을 호출하면 애니메이션이 한 번 더 발생합니다. 이 하나의 추가 애니메이션의 원인은 무엇이며 어떻게 처리 할 수 ​​있습니까?

이 바닥

function prevSlide(e){ 

    if(curHashIndex !== 0){ 

     $(prevBtn).off(); 

     // Stop the current slideshow 
     animateSlideshow("stop"); 

     // Reset the current slideshow 
     $("li.active .rightSlide > li").fadeOut(600).eq(0).fadeIn(600).addClass("actvImg"); 

     $(".rightSlides").animate({ 
      "left" : '+=345' 
     }, 600, function(){ 
      $(prevBtn).on('click', prevSlide); 
     }); 

     $(".leftSlides").animate({ 
      "left" : '+=417' 
     }, 600); 

     // Activate the new slide 
     $(".rightSlides li.active").removeClass("active").prev().addClass("active"); 
     activeSlide = $(".rightSlides li.active"); 
     total = $(".rightSlides li.active .rightSlide > li").length; 

     // Start slideshow on the new slide 
     var delay = setTimeout(animateSlideshow("play"), 10000); 

     updateHash(); 
    } 

} 





function animateSlideshow(action){ 

    if(action === "play"){ 
     $(activeSlide).data('animateSlideshow', 
      setTimeout(function(){ 

       if($(actvImg).index() === total - 1){ 
        $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").siblings().eq(0).fadeIn(animationSpeed).addClass("actvImg"); 
       }else{ 
        $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").next().fadeIn(animationSpeed).addClass("actvImg"); 
       } 

       actvImg = $(".rightSlides li.active .rightSlide > li.actvImg"); 
       actvImgIndx = $(actvImg).index(); 
       updateBreadcrumbs(); 
       animateSlideshow("play") 

      }, animationTimeout) 
     ); 
    }else{ 
     clearTimeout($(activeSlide).data('animateSlideshow')); 
    }; 

}; 

Answer 1

당신은 setInterval을을 (사용해야합니다)에 함수를 호출/위해 clearInterval() 오히려에서는 setTimeout을 사용하여 함수를 불러보다().

function animateSlideshow(action){ 

if(action === "play"){ 
    $(activeSlide).data('animateSlideshow', 
     setInterval(function(){ 

      if($(actvImg).index() === total - 1){ 
       $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").siblings().eq(0).fadeIn(animationSpeed).addClass("actvImg"); 
      }else{ 
       $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").next().fadeIn(animationSpeed).addClass("actvImg"); 
      } 

      actvImg = $(".rightSlides li.active .rightSlide > li.actvImg"); 
      actvImgIndx = $(actvImg).index(); 
      updateBreadcrumbs(); 

     }, animationTimeout); 
    ); 
}else{ 
    clearInterval($(activeSlide).data('animateSlideshow')); 
}; 

}; 

Answer 2

여기

DEMO .. 또한

내가 당신을 위해 실패 이유를 잘 모르겠지만, 내가 비슷한 데모를 시도하고 나를 위해 일했다, 나는 그만 .stop()을 사용 현재 애니메이션. 해당 객체에서 현재 애니메이션을 중지하려면이 객체를 사용할 수 있습니다.