Wie führt jQuery seine asynchronen Animationen durch?

Question

... oder genauer gesagt, wie können sie Animationen über Javascript erzeugen, das synchron ist, ohne die nächste Javascript-Anweisung aufzuhalten.

Es ist nur eine Kuriosität. Verwenden sie eine Kette von setTimeout()? Wenn ja, werden sie früh eingestellt, jeder mit einer etwas längeren Dauer als der vorherige und parallel läuft? Oder werden sie durch einen rekursiven Funktionsaufruf erzeugt, also in Serie?

Oder ist es etwas ganz anderes?

Answer 1

Es gibt eine Alternative zu setTimeout() namens setInterval(), die die Funktion aufruft, die Sie in regelmäßigen Abständen als Argument übergeben. Der Aufruf von setInterval gibt einen Wert zurück, der an clearInterval übergeben werden kann, um den Aufruf der Funktion zu stoppen.

Answer 2

Mit jQuery 1.4.2 auf den Leitungen 5534-5536:

if (t() && jQuery.timers.push(t) && !timerId) { 
    timerId = setInterval(jQuery.fx.tick, 13); 
} 

Hinweis der setInterval für tick Methode jQuery, die einen Schritt in einer Animation auslöst.

Answer 3

Verkettete Aufrufe von setTimeout sind nicht wirklich "rekursiv". Wenn eine setTimeout-Funktion beim Aufruf ein anderes Zeitlimit mit sich selbst als Handler einrichtet, ist der ursprüngliche Aufruf zum Zeitpunkt des Auftretens des neuen Zeitlimits längst vorbei.

Die Verwendung von setTimeout anstelle von setInterval ist (für mich) oft flexibler, da der zeitgesteuerte Code sich selbst anpassen (und möglicherweise abbrechen) kann. Das allgemeine Muster besteht darin, eine Sperre um den setTimout-Aufruf einzurichten, sodass die Daten, die für den zeitgesteuerten Prozess benötigt werden (die Animation, wenn Sie das tun), verfügbar und vom Rest der App isoliert sind. Dann wird das Timeout beim ersten Start gestartet.

Innerhalb des Timeout-Handlers kann "arguments.callee" verwendet werden, um auf sich selbst zu verweisen und das Timeout für nachfolgende "Frames" zurückzusetzen.