JQuery FadeIn wird zweimal aufgerufen nach FadeOut

Question

Die Situation: Ich habe 8 Folien. Wenn die Seite gestartet wird, sind alle bis auf die Anfangsseite ausgeblendet, wenn die erste angeklickt wird, blendet sie aus und dann werden 3 weitere nacheinander eingeblendet, wenn 3 da sind, werden sie ausgeblendet (maximale Zahl, die passen kann) und dann fadeIn die nächsten 3, danach verstecke ich sie und verblasse den Letzten, der bleibt. Das Ergebnis und die Animation ist alles in Ordnung, aber ich habe ein Problem, dass nach dem FadeOut aller Folien das nächste fadeIn zweimal aufgerufen wird und das Gesamtbild der Animation verschraubt wird. Ich habe viele Dinge ausprobiert, die Stopp-Methode, die ich mit Hide und anderen Dingen geschrieben habe, was könnte das Problem verursachen?

Der Code für jquery:

$(".slide_top").click(function() { 
animacija_init(); 
}); 

var kadras; 
var laikmatis; 

function animacija_init() { 
    kadras = 1; 
    $(".slide_top").fadeOut(500); 
    animacija_trigger(); 
} 

function animacija_trigger() { 
    if(kadras == 1) { 
     $('.slide.one').delay(500).fadeIn("slow"); 
     console.log("1");  
    } 
    if(kadras == 2) { 
     $('.slide.two').fadeIn("slow"); 
     console.log("2"); 
    } 
    if(kadras == 3) { 
     $('.slide.three').fadeIn("slow"); 
     console.log("3"); 
    } 
    if(kadras == 4) { 
     $('.slide').fadeOut(300, function() { 
      $('.slide.four').delay(100).fadeIn("slow"); 
      console.log("4"); 
     }); 
    } 
    if(kadras == 5) { 
     $('.slide.five').fadeIn("slow"); 
     console.log("5"); 
    } 
    if(kadras == 6) { 
     $('.slide.six').fadeIn("slow"); 
     console.log("6"); 
    } 
    if(kadras == 7) { 
     $('.slide').fadeOut(300, function() { 
      $('#last_slide').delay(300).fadeIn("slow"); 
      console.log("7"); 

    }); 
    } 
    kadras++; 
    laikmatis = setTimeout('animacija_trigger()', 2500); 
    if(kadras == 8) { 
     baigti_animacija(); 
    } 
} 

function baigti_animacija() { 
    clearTimeout(laikmatis); 
} 

Irgendwelche Tipps? Live-Beispiel hier: www.iamrokas.com/demo_boxi Console.log wird für die Überprüfung verwendet, wenn das Ereignis beginnt

Vielen Dank!

Answer 1

Es dauerte eine Weile, bis ich dies erkannte. Das Problem ist, dass die komplette Funktion $('.slide').fadeOut mehrfach ausgelöst wird, da es mehrere DOMs mit class = slide gibt !!

1) Verwenden Sie die Methode promise(), um die vollständige Funktion nur einmal auszuführen. Schauen Sie sich die JSFIDDLE an, die ich für Sie erstellt habe. Sie werden sehen, dass jede Zahl nur einmal in der Konsole statt 8 Mal gedruckt wird.

2) Ich habe eine globale Variable length hinzugefügt, um dynamisch die Zeit zu ändern, die vor der nächsten Animation verstreichen sollte.

3) Beachten Sie, dass die Reihenfolge der Ausführung nicht sequenziell ist, wie zu erwarten ist. Denken Sie an alles, was gleichzeitig ausgeführt wird. Es ist wichtig zu beachten, dass length zugewiesen wird vor setTimeout Funktion.

Ich habe diese Referenz Execute complete function only once verwendet.