Verhindern, dass die Funktion aufgerufen wird, bis Flag auf true gesetzt wird

Question

Ich habe eine ziemlich einfache Galerie erstellt. Die Elemente bekommen ihre Transformationsposition erhöht oder verringert auf Klick

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); 
} 

Alles mit funktioniert gut, aber das Problem ist, wenn ich rly schnell xxx Zeit klicken, wird es zerstört und macht unerwünschtes Verhalten. Ich benutze Flag, so dass die Funktion nur aufgerufen werden kann, wenn "running" false ist, was ich zurück auf false zurückstelle, wenn der Übergang des letzten Elements, das verschoben werden soll, vorüber ist. Es funktioniert bei den ersten paar Klicks, aber schnelles Klicken ruiniert es und bricht das ganze Skript.

Live-demo (klicken rly schnell xxx mal das Verhalten zu sehen)

Was dies dazu führen könnte? Das Flag wird nur gesetzt, wenn der Übergang endet. Warum also wird die Funktion aufgerufen? Gibt es einen Weg, wie man es reparieren kann, oder soll ich Brute Force (Versprechungen) dafür verwenden?

Answer 1

Dies scheint Ihr Problem zu sein:

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