Question

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

我相当肯定我的问题是确定范围，但不是100％;我已经把它带到了动画循环的位置，但是当用户点击暂停时，它会继续循环，而不是暂停动画。我可以看到clearInterval在console.log中被解雇了，但同样，它什么也没做，动画仍在继续。

我使用setTimeout延迟每张图表＆＃39;外观和使用（最肯定是以错误的方式）setInterval来安排循环。我在这里阅读/尝试了一些处理setTimeout和setInterval的答案，但无济于事。我很肯定这是我不理解为什么他们不工作而不是我的问题＆＃34;是不同的＆＃34;来自其他人。

那就是说，我现在已经在我的桌子上敲了三天，现在可以在这里使用一些指针。以下是我目前正在使用的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不停止函数执行

1 个答案: