Snap SVG：アニメーションの進行中にイベントリスナーを中断する

Question

このアニメーションのイベントリスナーを一時停止しようとしています。 クリックイベントは、前のイベントが完了するまで別のアニメーションをトリガーしません。私はブーリアンを使ってみましたが（例のように）、なぜ動作しないのか分かりません。

注：jqueryは使用できません。

例：Jsfiddle

var speed = 250, 
suspend = true; 

[].slice.call(document.querySelectorAll('.arrow_button')).forEach(function(el) { 

    var s = Snap(el.querySelector('svg')), 
     path = s.select('path'), 
     returnPath = path.attr('d'), 
     route = el.getAttribute('data-path-route'), 
     callback = function() { 
      path.animate({ 'path' : returnPath }, speed, mina.easeout); 
      suspend = true; 
     }; 

    el.addEventListener('click', function() { 
     if(suspend) { 
      suspend = false; 
      path.animate({ 'path' : route }, speed, mina.easein, callback); 
     }; 
    }); 

}); 

Answer 1

問題は、あなたがすぐにコールバック関数でtrueにsuspendを設定することです。コールバック関数内でタイムアウトを設定し、およそ250ms後（アニメーションの長さ/速度）にsuspendをtrueに設定することができます。 Updated fiddle

var speed = 250, 
suspend = true; 

[].slice.call(document.querySelectorAll('.arrow_button')).forEach(function(el) { 

    var s = Snap(el.querySelector('svg')), 
     path = s.select('path'), 
     returnPath = path.attr('d'), 
     route = el.getAttribute('data-path-route'), 
     callback = function() { 
      path.animate({ 'path' : returnPath }, speed, mina.easeout); 
      setTimeout(function(){ 
       suspend = true;  
      },speed) 
     }; 

    el.addEventListener('click', function() { 
     if(suspend) { 
      suspend = false; 
      path.animate({ 'path' : route }, speed, mina.easein, callback); 
     }; 
    }); 

}); 

EDIT：、 をsnapsvg.ioのマニュアルをよく見た後、私はあなたが直面している状況を処理するより良い方法を考え出しました。代わりに、タイムアウトを使用しての、あなたはこのupdated plunkrようなあなたのeaseoutアニメーションでコールバック関数を追加することができます。

var speed = 250, 
    suspend = true; 
[].slice.call(document.querySelectorAll('.arrow_button')).forEach(function(el) { 
    var s = Snap(el.querySelector('svg')), 
     path = s.select('path'), 
     returnPath = path.attr('d'), 
     route = el.getAttribute('data-path-route'), 
     callback = function() { 
      path.animate({ 'path' : returnPath }, speed, mina.easeout, function(){ 
       suspend=true; 
      }); 
     }; 
    el.addEventListener('click', function() { 
    console.log("test",suspend); 
     if(suspend) { 
      suspend = false; 
      path.animate({ 'path' : route }, speed, mina.easein, callback); 
     }; 
    }); 
}); 

をアニメーションが終了したときにこのコールバック関数は、独自のタイムアウトを設定することが不要になって、呼び出されます。投稿者：snapsvg.io docs