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

Question

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

私の問題はスコーピングであると確信していますが、100% ではありません。アニメーションが循環する場所に到達しましたが、ユーザーが一時停止をクリックすると、アニメーションが一時停止せずに循環し続けます。clearIntervalでが発射されているのがわかりますconsole.logが、やはり何もせず、アニメーションが続きます。

私は、setTimeout各チャートの表示を遅らせるために使用し、(間違いなく間違った方法で)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);
  }
});