Остановка анимации и запуск новой

Я создаю визуализацию, которая содержит данные за 15 минут в день, поэтому я обновляю viz в соответствии с этим.

У меня есть две кнопки, одна, чтобы начать один случайный день 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);

    });
}

1 ответ

  1. Я бы рекомендовал очистить тайм-аут, прежде чем устанавливать новый, см. clearTimeout на MDN

    Проблема в том, что после запуска асинхронных вызовов тайм-аута они никогда не останавливаются. Они продолжаются до тех пор, пока их не periodостанется.

    Посмотрите на эту проблему:

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

    При выборе новой даты возьмите timeoutссылку и остановите ее window.clearTimeout(timeout).