jQuery setTimeout 不停止函数执行

Question

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

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

我正在使用 setTimeout 来延迟每个图表的出现并使用（肯定是错误的方式）setInterval 来安排循环。我在这里 read/tried 有许多关于 setTimeout 和 setInterval 的答案，但无济于事。我敢肯定，这是我不了解为什么它们不起作用，而不是其他人提出的问题 "is different"。

就是说，三天来我一直在用头敲桌子，在这里真的需要一些指点。下面是我目前正在使用的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" />

jQuery setTimeout 不停止函数执行

jQuery setTimeout Not Stopping Function Execution

javascript

jquery

settimeout

setinterval

pausing-execution