Question

我正在构建一个每天每15分钟包含一次数据的可视化，因此我会根据这一点更新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);

    });
}

Answer 1

我建议您在设置新超时之前清除超时，请参阅clearTimeout on MDN

问题是，一旦触发异步超时调用，就永远不会停止它们。它们一直持续到没有period为止。

看看这个问题：

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

选择新日期后，请使用timeout引用并使用window.clearTimeout(timeout)将其停止。

停止动画并开始新动画

1 个答案: