jQuery를 사용하여 시간 초과 기능을 중지하려고 시도했습니다.

Question

나는 절대적으로 배치 된 div 집합을 이미지 용 컨테이너로 사용합니다. 각 div의 클래스는 photoCover이고 img의 클래스는 fbPhoto입니다. 페이지로드시 컬렉션의 각 이미지가 사라져서 아래의 루프를 드러내고 루프를 반복하는 루핑 기능을 설정했습니다.

사용자가 이들 중 하나를 클릭 할 때이를 멈추게하려면 필요한 것은 무엇입니까?

나는 $(this).stop(true, true)과 몇 가지 예제를 포함하여 다양한 옵션을 시도했지만 아무 것도 작동하지 않는 것 같습니다.

$(document).ready(function() { 
    $('.photoCover').each(function() { 
     // get an array of elements to slide 
     var eleArray = $(this).children('.fbPhoto').get().reverse(); 
     loopSmallSlides(eleArray); 
    }); 
}); 

$(ele).fadeToggle('slow').on("click", function() { 
    clearTimeout(thumbNailTimeOut); 
}); 

이 시도 니펫 : 여기

다음과 같이 루프 기능 document.ready 생성 요소들의 어레이를 수용 루프 기능

var thumbNailTimeOut; 
function loopSmallSlides(eleArray) { 
    var slideCount = eleArray.length; 
    $(eleArray).each(function (indexInArray) { 
     var ele = this; 
     thumbNailTimeOut = setTimeout(function() { 
      if (indexInArray == slideCount - 1) { 
       $(eleArray).fadeIn('slow').on("click", function() { 
        clearTimeout(thumbNailTimeOut); 
       }); 
       clearTimeout(thumbNailTimeOut); 
       loopSmallSlides(eleArray); // loop the function when the end is reached 
      } else { 
       $(ele).fadeToggle('slow').on("click", function() { 
        clearTimeout(thumbNailTimeOut); 
       }); 
      }; 
     }, (indexInArray + 1) * 1000); 
    }); 
}; 

대한 코드의 배열 내의 각 요소에 클릭 핸들러를 추가하여 이러한 요소 중 하나를 클릭 할 때 시간 제한을 지우지 만 작동하지 않습니다. 당신이 볼 수 있듯이 변수 thumbNailTimeOut은 전 세계적으로 사용 가능한 변수입니다 ... 이것까지 이해하면 timeOut을 취소해야합니까?

언급했듯이 stop을 사용해 보았지만 아무데도 갈 수 없어서 부모 요소에 click을 추가하고 하위 애니메이션을 아래에서 반복하여 반복했지만 작동하지 않습니다.

$('.photoCover').each(function() { 
    $(this).children('.fbPhoto').stop(true, true); 
}); 

HTML의 경우처럼 필요 외모 :

그래서 제 질문은, 내가 함께 그 애니메이션을 일시 정지 할 수있는 방법 부모 .photoCover 요소 내에 중첩 된 이미지의 각 세트에이 루프를 설정하는 데있다

<style> 
    .photoCover{display:inline-block;width:204px;height:194px;vertical-align:top;} 
    .fbPhoto{position:absolute;display:inline-block;width:110px;height:110px;margin:4px;background-position:center center;background-repeat:no-repeat;border-radius:5px;border:16px groove #93BABA;background-color:#93BABA;} 
</style> 

<div class="photoCover"> 
    <h4>Album Title</h4>      
    <span style="background-image: url('IMG URL');" class="fbPhoto"></span> 
    <span style="background-image: url(IMG URL); " class="fbPhoto"></span> 
    <span style="background-image: url(IMG URL); " class="fbPhoto"></span> 
    <span style="background-image: url(IMG URL); " class="fbPhoto"></span> 
    <span style="background-image: url(IMG URL); " class="fbPhoto"></span>       
</div> 

클릭 한 다음 다시 시작 하시겠습니까?

많은 도움을 주셨습니다. 그래서 이것에 관해서는 많은 다른 질문이있는 것 같지만이 예제에서 대답을 얻을 수는 없습니다!

Answer 1

thumbNailTimeOut이 기능에 또 다시 덮어되고 : 함수가 작업을 완료 한 후

$(eleArray).each(function (indexInArray) { /* fn body */ }); 

, 당신의 변수에 저장되는 유일한 것은 당신이 설정 한 시간 초과 마지막입니다 . 변수를 배열로 사용해 볼 수도 있습니다. 될 것입니다 시간 제한을 삭제

thumbNailTimeOut[index] = setTimeout(function() { /* fn body */ }, delay); 

: 예를 들어

clearTimeout(thumbNailTimeOut[index]); 

그러나 솔직히 말해서 : 나는 많은 시간 제한 것을 사용하는 접근 방식을 좋아하지 않는다. 어쩌면 단일 간격 기능을 사용하는 것이 훨씬 더 편리 할 것입니다.

편집 :
간격으로 함수를 다시 쓰려고했습니다. 아직 시도하지는 않았지만 타임 아웃 코드보다 훨씬 깨끗해 보입니다.

function loopSmallSlides(eleArray) { 
    var interval 
    , $elems = $(eleArray); 
    , current = 0; 
    , slideCount = eleArray.length; 

    interval = setInterval(function(){ 
     current = intervalFn($elems, current); 
    }, 1000); 

    $elems.on('click', function(e) { 
     clearInterval(interval); 
    }); 
}; 

function intervalFn($elems, current) { 
    if(current < $elems.length) { 
     $elems.eq(current).fadeIn('slow'); 
     return current+1; 
    } else { 
     $elems.fadeOut('slow'); 
     return 0; 
    } 
}