Warten Sie, bis eine Funktion mit Animationen beendet ist, bis eine andere Funktion ausgeführt wird

Ich habe ein Problem mit normal (Nicht-Ajax) Funktionen, die viele Funktionen beinhaltenAnimationen in jedem von ihnen. Momentan habe ich einfach einesetTimeout zwischen Funktionen, aber das ist nicht perfekt, da keine Browser / Computer gleich sind.

Zusätzlicher Hinweis: Beide haben separate Animationen / etc, die kollidieren.

Ich kann nicht einfach eins in die Rückruffunktion eines anderen setzen

// multiple dom animations / etc
FunctionOne();

// What I -was- doing to wait till running the next function filled
// with animations, etc

setTimeout(function () { 
    FunctionTwo(); // other dom animations (some triggering on previous ones)
}, 1000); 

Gibt es sowieso in js / jQuery zu haben:

// Pseudo-code
-do FunctionOne()
-when finished :: run -> FunctionTwo()

ich weiss Bescheid$.when() & $.done(), aber die sind für Ajax ...

MEINE AKTUALISIERTE LÖSUNG

jQuery verfügt über eine exponierte Variable (die aus irgendeinem Grund nicht in den jQuery-Dokumenten aufgeführt ist) namens $ .timers, die die derzeit stattfindenden Animationen enthält.

function animationsTest (callback) {
    // Test if ANY/ALL page animations are currently active

    var testAnimationInterval = setInterval(function () {
        if (! $.timers.length) { // any page animations finished
            clearInterval(testAnimationInterval);
            callback();
        }
    }, 25);
};

Grundsätzliche Verwendung:

// run some function with animations etc    
functionWithAnimations();

animationsTest(function () { // <-- this will run once all the above animations are finished

    // your callback (things to do after all animations are done)
    runNextAnimations();

});

Antworten auf die Frage(9)

Ihre Antwort auf die Frage