jQuery setTimeout不停止函數執行

Question

試圖構建一個允許用戶點擊播放的圖表，它將循環顯示一個年數，在移動到下一個圖表之前每年在圖表中顯示幾秒鐘。
它也應該允許用戶點擊暫停，暫停動畫;這是我失敗的地方。

我很確定我的問題是範圍，但不是100％;我已將它放到動畫循環的位置，但是當用戶單擊暫停時，它會繼續循環，而不會暫停動畫。我可以看到clearInterval正在console.log中發射，但它又一次沒有任何動作，動畫仍在繼續。

我正在使用setTimeout來延遲每個圖表的外觀，並使用（最肯定是以錯誤的方式）setInterval來安排循環。我已閱讀/嘗試了一些處理setTimeout和setInterval的答案，但無濟於事。我很積極，因爲我缺乏理解爲什麼他們不工作，也不是說我的問題與其他問題「不同」。

這就是說，我一直在我的桌子上敲我的頭三天，現在可以真正使用一些指針。下面是我目前正與的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" />