jQuery setTimeout関数の実行を停止しない

Question

ユーザーがクリックを再生できるようにチャートを作成しようとすると、年単位で循環し、次のチャートに移動する前にチャートに数秒間表示されます。
また、ユーザーがアニメーションを一時停止してクリックすることを許可する必要があります。これは私が失敗しているところです。

私の問題は範囲指定されていますが、100％ではありません。アニメーションが繰り返される場所に移動しますが、ユーザーが一時停止をクリックすると、アニメーションを一時停止させずに繰り返し再生されます。 clearIntervalがconsole.logで発生しているのがわかりますが、もう一度、何もせずにアニメーションが続行されます。

私はを使用して、各チャートの表示を遅らせ、間違った方法で（確かに間違って）setIntervalを使用してループをスケジュールします。私はsetTimeoutとsetIntervalを扱っていますが、役に立たないものはたくさんあります。私は彼らがなぜ働かないのか、私の質問は他の人と "違う"のではないという理解が不足していることが肯定的です。

私は3日間私の机の上で頭を叩いていて、実際にここでいくつかの指針を使うことができたと言いました。以下は、私は現在で働いていたJavaScript/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" />