So verzögern/Warten in der Ausführung von JavaScript -Code/Warten?
Anfänglich mag es keine große Sache erscheint, aber wenn Sie in der Welt der Programmierung Fortschritte machen, werden Sie erkennen, wie wichtig es ist. Wenn also keine Wartezeit \ Delay \ Sleep -Funktion vorhanden ist, gibt es keine Möglichkeit, die Ausführung eines Programms in JavaScript zu kontrollieren? Nun, es gibt verschiedene Funktionen und Methoden, die uns helfen, die gleiche Aufgabe in JavaScript zu erreichen.
Verwenden Sie SetTimeout () -Funktion
Die erste und häufigste Methode bei der Implementierung einer Verzögerung bei der Ausführung eines JavaScript -Code besteht darin, die zu verwenden setTimeout () Methode. Sie werden einen sehr häufigen Fehler machen, wenn man davon ausgeht, dass die Syntax ist:
setTimeout (Verzögerung in MS);In der Realität nimmt diese Methode eine Rückruffunktion an. Beachten Sie das, wir können die Syntax als:
Syntax der SetTimeout () -Funktion
setTimeout (Funktion, Verzögerung in MS);Um die Arbeit der Arbeit besser zu verstehen setTimeout () Methode, versuchen wir, ein Problem zu lösen.
Beispiel
Nehmen wir an, dass wir Zahlen von 1 bis 10 mit einer Verzögerung von 1 Sekunde zwischen jeder Zahl drucken möchten.
Der traditionelle Weg wäre:
für (lass i = 1; ich <=10 ; i++ )setTimeout (1000);
Konsole.log (i);
Die Ausgabe des Codes druckt sofort alle 10 Ziffern wie:
Weil wir nichts an die setTimeout () -Methode übergeben.
Um die Verzögerung mit der Methode setTimeout () hinzuzufügen, denken wir, dass der richtige Weg ist:
für (lass i = 1; ich tröste.log (i), 1000);Anstatt nach jeder Zahl eine 1-Sekunden-Verzögerung zu erhalten, erhalten wir eine 1-Sekunden-Verzögerung im Start und dann werden alle Zahlen sofort gedruckt. Wie nachfolgend dargestellt:
Wir hatten die anfängliche Verzögerung, aber danach keine Verzögerung. Warum ist das so? Nun, so wie die setTimeout () Funktioniert ist, dass es immer im synchronen Modus ausgeführt wird. Dies bedeutet, dass selbst mehrere Aufrufe bei derselben Funktion zur Verzögerung von 1 Sekunden führen wird.
Was wir getan haben, war, wir haben jeden angerufen setTimeout () Methode nacheinander und aufgrund der asynchronen Natur der setTimeout () Methode, es wartet nicht auf die vorherige setTimeout () Methode zum Beenden und dann den nächsten ausführen.
Also haben wir letztendlich 10 Anrufe gegeben setTimeout () Methode alle die gleiche Verzögerungszeit haben. Es gibt eine Möglichkeit, dies zu beheben, und das ist, indem Sie einen zunehmenden Verzögerungs -Timer wie folgt verwenden:
setTimeout (() => Konsole.log (i), 1000);setTimeout (() => Konsole.log (i), 2000);
setTimeout (() => Konsole.log (i), 3000);
Das obige Codebeispiel für das Drucken von 10 Nummern würde zu Folgendem werden:
für (lass i = 1; ich tröste.log (i), i * 1000);Wir verwenden den zunehmenden Wert der Variablen „I“ und multiplizieren ihn mit der 1-Sekunden-Verzögerung, um Inkrementierungsverzögerungen für jeden Anruf von zu erzeugen setTimeout ()
Die Ausgabe damit wird:
Wir haben es endlich gemacht. Aber hier stimmt immer noch etwas nicht. Das ist die Tatsache, dass die Berechnung von Verzögerungen auf diese Weise sehr kompliziert ist, insbesondere wenn Sie in einer realen Anwendung arbeiten. Auch dafür gibt es eine Möglichkeit, Ihre eigene Verspätung/Wartenmethode zu erstellen.
So codieren Sie Ihre eigene Verzögerungs-/Wartefunktion?
Wir wollen eine bessere Lösung, was wir tun können, ist codieren unsere eigenen ““Verzögerung" Methode. Wir werden die verwenden setTimeout () Funktion und Versprechen, uns zu helfen, die “zu erstellen“Verzögerung”Methode als:
Wir werden einfach eine Funktion mit dem Namen „Verzögerung“ erstellen und in Millisekunden die Zeit übergeben. Diese „Verzögerungs“ -Funktion gibt ein Versprechen zurück und lässt die Ausführung nicht weitergehen, bis das Versprechen gelöst ist.
Funktionsverzögerung (ms)Neues Versprechen zurückgeben (Resolve => setTimeout (Resolve, MS));
Jetzt nennen wir diese "Verzögerungs" -Funktion mit einer ".Dann " Operator. So was:
Konsole.log ("Hallo");Verzögerung (2000).dann (() => Konsole.log ("Welt!"););
Die Ausgabe wäre:
Wir schaffen ein Versprechen und setTimeout () Methode mit einiger Verzögerung zu beschließen Die versprechen. Sie können mehr über JavaScript -Versprechen lesen.
Falls Sie das loswerden möchten .Dann() Methode und um die Verzögerungen zu ketten, können wir verwenden, ist zu verwenden asynchron Und erwarten mit unserer "Verzögerungs" -Funktion.
asynchrische Funktion Demo ()Konsole.log ("das ist ein");
auf Verzögerung warten (1000);
Konsole.log ("LinuxHint");
auf Verzögerung warten (1000);
Konsole.Log ("Tutorial!");
Hinweis: Wir müssen die hinzufügen asynchron Schlüsselwort mit der Funktion, die die aufruft Verzögerung() Methode. Wenn wir das Programm ausführen, ist das, was wir bekommen, Folgendes:
Wenn wir zu unserem Problem kommen, müssen wir den Zahlendrucker von 1 bis 10 in einer asynchronen Funktion erstellen und die "Verzögerungs" -Methode aufrufen, die wir gerade erstellt haben:
Async Funktion numberPinter ()für (lass i = 1; ich <= 10; i++)
Konsole.log (i);
Warten Sie die Verzögerung (1000)
Und wir müssen diese Funktion mit:
numberPinter ();Die Ausgabe, die wir damit erhalten, ist:
Das ist es für unsere "Verzögerungs" -Funktion.
Abschluss
Es gibt keinen Einbau Warten, Verzögerung, oder Schlaffunktion in JavaScript, aber wir können die verwenden setTimeout () Methode, um das Verzögerungsverhalten nachzuahmen, und wir können sogar unsere eigenen codieren Verzögerung() Methode, um eine Verzögerung bei der Ausführung des Programms zu erstellen. Wir haben gelernt, wie setTimeout () Methode funktioniert, wie es gemeinsam ist, seine Arbeit und Verwendung missverstehen zu lassen. Darüber hinaus haben wir gelernt, wie man die setTimeout () -Methode mit kombiniert Versprechen Um unsere eigene Verzögerungsmethode zu erstellen, und wir haben auch gelernt, wie man verwendet wird asynchron Und erwarten auf unserer Funktion zu warten und dann die Ausführung fortzusetzen.