Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript Grundkurs

Zeitverzögerung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das window-Objekt besitzt eine Methode mit Namen setTimeout(), das ist ein Timer, der bei fast allen Animationen in JavaScript Anwendung findet. Mit clearTimeout() können Sie einen wartenden Aufruf unterbrechen.
04:16

Transkript

Eine immens wichtige Methode von Window ist setTimeout, das ist ein Timer. Das ist die einzige vernünftige Möglichkeit, wie Sie unter JavaScript zeitverzögerte Aufrufe hinbekommen, gerade in Verbindung mit Rekursion, beziehungsweise Selbstaufrufen ist das wirklich die einzige sinnvolle Vorgehensweise, wenn Sie diese Selbstaufrufe zeitgesteuert durchführen wollen und das ist beispielsweise bei Animationstechniken der Schlüssel zum Erfolg. Nahezu sämtliche Animationstechniken, die Sie mit Javascript Machen, werden mit setTimeout gemacht und den entsprechenden HTML Techniken. Wir schauen uns erst mal an, was unser Beispiel, dass wir hier besprechen wollen tut. Ich habe hier eine Website mit drei Button und wenn ich auf den ersten Button klicke, dann starten zwei Animationen. Diese beiden Animationen sind unabhängig voneinander. Sie sehen, dass da die Breite und Höhe verändert wird und die eine Animation im grunde gar nichts mit der anderen zu tun hat, obwohl die eine beispielsweise schon wieder von vorne anfängt, läuft die andere noch weiter. Sie sind bewusst unterschiedlich gemacht. Ich sehe jetzt hier eine Schaltfläche Stop und ich kann ganz offensichtlich die eine Animation anhalten und dann lasse ich sie wieder laufen. Stoppe ich mal die zweite, jetzt stoppe ich auch die erste. Bitte achten Sie noch nicht so im Detail darauf, was ich hier zur eigenlichen Animationen mache. Ich manipuliere das Teilobjekt. Was wichtig ist, ist dieser setTimeout Befehl. Als ersten Parameter schreiben Sie einen Aufruf hin, den Sie nach einer gewissen Zeit in Millisekunden ausführen wollen. Sie können hier auch eine Funktionsreferenz notieren ohne Klammern und ohne Hochkomma, also nur der Name der Funktion, oder Sie können ja eine anonyme Funktion notieren. Ich habe in diesen Fall einen Funktionsaufruf hier stehen. In meinem Fall ist das ein Selbstaufruf und das heißt, wenn ich diese Funktion Animation 1 aufrufe, macht er das hier. Das sind Animationstechniken und dann wartet er die angegebene Zeitspanne in Millisekunden, bis er sich wieder selbst aufruft und das kann ich von mir aus auch endlos durchführen, wenn Sie einen Counter mitlaufen lassen und beispielsweise sobald der Counter einen bestimmten Wert hat, hier ein Return einbauen. Dann würden Sie diese Funktion automatisch verlassen, es wäre keine endlose Geschichte. Genau das gleiche mache ich hier auch mit dem zweiten Pbjekt, dass hier ist dieser Div, den ich da vergrößere. Das ist das Bild. Bitte beachten Sie, dass ich hier auch mit Stylesheets arbeite und beispielsweise im Div und das Bild am Anfang auf die Größe 0 setze und hier auch eine Hintergrundfarbe für den Div vergebe . Aber das ist nicht das eigene Thema von dir Film. Wenn Sie jetzt so einen Timer wirklich rekursiv benutzen, also immer wieder sich selbst aufrufen, dann müssten Sie unter Umständen entweder einen Counter mitlaufen lassen, um ihn zu unterbrechen, oder aber Sie nutzen aus, dass diese Methode einen Rückgabewert liefert und das ist ein Zeiger auf den Timer und es gibt eine Methode clearTimeout, der ich diese Referenz übergeben kann und das bedeutet nichts anderes, als dass dieser Timer abgeschaltet wird. Es würde in unserem Fall dazu führen, dass diese Animation stoppt. Ich möchte noch einmal betonen, dass diese Timer universell gesehen werden können und nichts spezielles für Animationen sind, aber Animationen fast immer damit arbeiten und auch fast immer mit diesem rekursiven in Anführungszeichen Techniken, diesen Selbstaufrufen. Vollständigkeit halber zeige ich Ihnen auch noch mal diese Seite, wo ich die diese entsprechenden Funktionen aufrufe, aber die ist ganz trivial. Es sind drei Schaltflächen und hier ein leerer Div und hier wird ein Bild refrenziert. Hier oben sehen Sie die Referenz auf die CSS-Datei und die JavaScript Datei.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!