アニメーションを停止して新しいアニメーションを開始する

Question

私は1日15分のデータを含むビジュアライゼーションを構築しているので、それに従ってビズを更新します。

私は2つのボタンを持っています.1つはランダムな日を開始し、もう1つは停止し、別のランダムな日を開始します。

問題は、開始日の別のボタンをクリックすると、ビジュアライゼーションが実際に情報を迅速に更新し始め、前のタイマーがまだ進行しているようです。私はそれを解決する方法を見つけようとしましたが、解決策には至りませんでした。

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)でそれを停止します。