jQuery setTimeout 중지되지 않음 함수 실행

Question

사용자가 클릭 재생을 허용하는 차트를 작성하려고하면 차트를 몇 초 동안 차트에 표시하고 다음으로 이동하기 전에 여러 해를 반복합니다.
사용자가 일시 정지를 클릭하여 애니메이션을 일시 중지 할 수 있도록해야합니다. 이것은 내가 실패하고있는 곳이다.

내 문제는 범위가 있지만 100 %는 아닙니다. 애니메이션을 반복 할 곳을 찾았지만 사용자가 일시 중지를 클릭하면 일시 중지가 아닌 애니메이션이 계속 순환됩니다. clearInterval이 console.log에서 실행되는 것을 볼 수 있지만 다시는 아무것도 수행하지 않고 애니메이션이 계속됩니다.

나는 각 차트의 모양을 지연시키고 (가장 확실하게 잘못된 방식으로) setInterval을 사용하여 루프를 예약합니다. 나는 여기에서 많은 답변을 setTimeout과 setInterval을 읽었으며 사용했지만 아무 소용이 없다. 나는 그들이 왜 효과가 없는지 이해하지 못하고 다른 질문과 "내 질문이 다르다"는 것이 확실합니다.

그런데, 나는 3 일 동안 내 책상에 머리를 두드리고 있었고 여기에 몇 가지 조언을 실제로 쓸 수 있었다. 아래는 내가 현재 함께 일하고 있어요 자바 스크립트/jQuery를은 다음과 같습니다

jQuery('#animation-play').on('click', function() { 
    // loopThroughYears(); 
    var animation; 
    if (jQuery('#animation-play').hasClass('play')) { 
    jQuery('#animation-play').addClass('stop').removeClass('play').text('Pause Animation'); 
    var years = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]; 
    var time = 1000; 
    if (animation) { 
     clearInterval(animation); 
    } 
    animation = setInterval(function() { 
     $.each(years, function(index, values) { 
     setTimeout(function() { 
      if (years.this < 2016) { 
      selectChartYear(values); 
      jQuery("#chart-years").val(values); 
      } 
     }, time); 
     }); 
    }, time); 
    } else { 
    jQuery('#animation-play').addClass('play').removeClass('stop').text('Play Animation'); 
    console.log("Timeout Cleared!"); 
    clearInterval(animation); 
    } 
}); 

Answer 1

animation 변수는 새로운 하나를 클릭이 발생할 때마다 생성, 클릭 처리기 내부에 선언된다.

당신은 jQuery의 data()

jQuery('#animation-play').on('click', function() { 
 
    
 
    clearInterval($(this).data('animation')); 
 
    
 
    if (jQuery('#animation-play').hasClass('play')) { 
 
     jQuery('#animation-play').addClass('stop') 
 
           .removeClass('play') 
 
           .text('Pause Animation'); 
 
            
 
     var years = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]; 
 
     var time = 1000; 
 
     var self = $(this); 
 
     
 
     self.data('year', self.data('year') || -1); 
 
     
 
     self.data('animation', 
 
      setInterval(function() { 
 
      \t var idx = self.data('year') + 1; 
 
       if (idx > years.length) { 
 
       \t idx = 0; 
 
        self.trigger('click'); 
 
       } else { 
 
        var value = years[idx]; 
 

 
        //selectChartYear(value); 
 
        jQuery("#chart-years").val(value); 
 
       } 
 
       
 
\t \t \t \t self.data('year', idx); 
 
      }, time) 
 
     ); 
 
    } else { 
 
     jQuery('#animation-play').addClass('play') 
 
     \t \t \t \t \t \t .removeClass('stop') 
 
           .text('Play Animation'); 
 
            
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="animation-play" class="play"> 
 
    click here to start 
 
</div> 
 
<br/> 
 
<input id="chart-years" />