javascript - jQuery setTimeout 不停止函数执行

Question

尝试构建一个图表，允许用户单击“播放”，它将循环显示一系列年份，在图表中显示每一年几秒钟，然后再进入下一个年份。
它还应该允许用户单击“暂停”，暂停动画；这就是我失败的地方。

我相当确定我的问题是范围界定，但不是 100%；我已经到达动画将循环播放的位置，但是当用户单击“暂停”时，它会继续循环播放，而不是将动画暂停。我可以看到 clearInterval 正在 console.log 中触发，但同样，它什么也没做，动画仍在继续。

我使用 setTimeout 来延迟每个图表的出现，并使用(肯定以错误的方式)setInterval 来安排循环。我在这里阅读/尝试了许多有关 setTimeout 和 setInterval 的答案，但无济于事。我确信这是我缺乏理解为什么它们不起作用，而不是我的问题与其他问题“不同”。

也就是说，我已经把头撞在 table 上三天了，这里确实需要一些指导。下面是我当前正在使用的 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() {
            	var idx   = self.data('year') + 1;
                if ( idx > years.length ) {
                	idx = 0;
                    self.trigger('click');
                } else {
                    var value = years[idx];

                    //selectChartYear(value);
                    jQuery("#chart-years").val(value);
                }
                
				self.data('year', idx);
            }, time)
        );
    } else {
        jQuery('#animation-play').addClass('play')
        						 .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" />