Animation mit setTimeOut verzögert nicht

[Felix Riesterer]

Lieber Matthias Scharwies,

Animieren in JavaScript funktioniert in aller Regel so, dass man eine Funktion schreibt, die einen Schritt innerhalb der Bewegung ausführt. Diese Funktion wird dann in bestimmten Zeitabständen immer wieder ausgeführt.

Wie Du die Steuerung umsetzt, die bestimmt, wann und wie oft diese Schritt-Funktion aufgerufen wird, ist relativ frei. Du kannst die Funktion selbst bestimmen lassen, wann sie damit aufhört sich selbst wieder aufzurufen:

jetztIsSchluss = false; // globale Variable, entspricht window.jetztIsSchluss  
  
// eigentliche Animationsfunktion (erhöht width-Eigenschaft eines Objektes)  
function animationsSchritt () {  
    var o = document.getElementById("gesicht");  
    var wert;  
  
    if (o) {  
        // nächsten Schritt der Animation ausführen  
        wert = parseInt(o.style.width);  
        wert++;  
        o.style.width = String.concat(wert, "px");  
  
        if (wert > 100) {  
            jetztIsSchluss = true;  
        }  
  
        // weitermachen?  
        if (!jetztIsSchluss) {  
            window.setTimeout(animationsSchritt, 1000);  
        }  
    }  
}  
  
// Animation "zünden"  
animationsSchritt();

Du kannst auch vermeiden, mit globalen Variablen zu hantieren. Dazu packst Du alles in eine Funktion, damit die Variablen innerhalb dieser gelten, aber "nach außen" nicht sichtbar werden. Dann packst Du diese Funktion auch noch in Klammern, damit sie keinen Namen braucht, und führst sie sofort aus:

(function () { ... }());

Der Inhalt obiger Funktion sieht dann etwas anders aus:

(function () {  
  
    var jetztIsSchluss = false; // lokale Variable  
  
    // eigentliche Animationsfunktion  
    var animationsSchritt = function () {  
        var o = document.getElementById("gesicht");  
        var wert;  
  
        if (o) {  
            // nächsten Schritt der Animation ausführen  
            wert = parseInt(o.style.width);  
            wert++;  
            o.style.width = String.concat(wert, "px");  
  
            if (wert > 100) {  
                // jetztIsSchluss ist hier "sichtbar" (closure)!  
                jetztIsSchluss = true;  
            }  
  
            // weitermachen?  
            if (!jetztIsSchluss) {  
                window.setTimeout(  
                    /* Hier müssen wir eine neue (anonyme) Funktion notieren,  
                     * da die lokale Variable "animationsSchritt" im Kontext  
                     * des Timeout-Ereignisses nicht bekannt ist. Durch diese  
                     * Schreibweise ist nun aber "animationsSchritt" innerhalb  
                     * dieser anonymen Funktion bekannt ("closure"), sodass  
                     * diese "lokale Funktion" gefunden und ausgeführt werden  
                     * kann.  
                     */  
                    function () {  
                        animationsSchritt();  
                    },  
                    1000  
                );  
            }  
        }  
    }  
  
    // Animation "zünden"  
    animationsSchritt();  
}());

Mit der obigen Schreibweise ist es nun wieder (fast) egal, wie Du Deine Funktionen nennst, da Du sie vor möglichen anderen JavaScripts auf Deiner Seite "versteckst".

Liebe Grüße,

Felix Riesterer.