flagがget trueに設定されるまで関数が呼び出されないようにする

Question

かなり簡単なギャラリーを作成しました。要素は、その変換位置は

function pushIt(max, target, index, count) { 

    if (count == max) { 
     target[index -1].addEventListener("transitionend",turnOf,false); 
     return; 
    } 

    var tmp     = target[index]; 
    var matrix    = window.getComputedStyle(tmp).getPropertyValue("transform"); 
    var translate_left  = matrix.split(",")[4]; 
    var translate_top  = matrix.split(",")[5].split(")")[0]-215; 
    tmp.style.transform  = "translate3d(" + translate_left + "px," + translate_top + "px,0)"; 
    setTimeout(function(){ 
    pushIt(max, target, index + 1, count + 1); 
    },50) 
} 
function turnOf(){ 
    running = false; 
    this.removeEventListener(turnOf); 
} 

を使用して、クリックに増減すべてが正常に動作している取得しますが、問題は、私はxxxの時間RLY速いをクリックしたとき、それは破壊され、不要な動作をします、です。私はフラグを使用しているので、 "running"がfalseの場合にのみ関数を呼び出すことができます。最後に移動する要素の遷移が終わったときにfalseに戻ります。それは最初の数回のクリックで機能しますが、速くクリックするとそのスクリプトが破棄され、スクリプト全体が中断されます。

ライブdemoこれを引き起こす可能性がありますどのような

（動作を確認するためにRLY速いxxxの回をクリックしてください）？このフラグは、トランジションが終了したときにのみ設定されるため、なぜ関数が呼び出されるのですか？どのようにそれを修正する方法がある、またはshoud私はこれにブルートフォース（約束）を使用するか？

Answer 1

これはあなたの問題のようです：

function turnOf(){ 
    running = false; 
    //this.removeEventListener(turnOf); 
    this.removeEventListener("transitionend", turnOf); 
}