停止动画并开始新的动画

• Z时代
• 2024-01-10
• 分类：问答

我正在构建包含每天每15分钟数据的可视化，因此我根据该更新了viz。停止动画并开始新的动画

我有两个按钮，一个开始一个随机日，即另一个停止它，并开始另一个随机日即viz。

问题是，当我点击开始的另一天按钮，可视化开始更新信息真的很快，似乎前一个计时器仍在继续。我试图找到解决方法，但没有找到解决办法。

HTML按钮：

<input name="updateButton" 
       type="button" 
       value="Another day" 
onclick="playAnimation(500)" /> 
<input name="updateButton" 
       type="button" 
       value="Start" 
onclick="playAnimation(500)" /> 

动画d3js代码：

function playAnimation(speed) { 
    var interval_speed = speed; 
    var dates = getAllDays('04/01/2016', '07/31/2016'); 
    random_day = dates[Math.floor(Math.random() * dates.length)]; 
    var fname = 'mapped_molinetes_agg_per15_' + random_day[0] + '.csv'; 
    d3.csv(fname, function(molinetes) 
    { 
     var timeIntervals = getUniqueValuesArray(molinetes, 'DESDE'); //TODO: sort? 
     var timeout; 
     var period = timeIntervals.shift(); 
     function timer() { 
      var filtered_molinetes = molinetes.filter(function(d){ 
       return d.DESDE === period; 
      }); 
      update(filtered_molinetes, period, random_day); 
      period = timeIntervals.shift(); 
      if (period){ 
       timeout = setTimeout(timer, interval_speed); 
      } 
     } 
     stopAnimation(timer); 
     timeout = setTimeout(timer, interval_speed); 
    }); 
} 

回答：

timeout = window.setTimeout(() => console.log('async call'), 1000) 
timeout = window.setTimeout(() => console.log('I am still faster'), 500) 

以上是 停止动画并开始新的动画 的全部内容， 来源链接： utcz.com/qa/266734.html