Jak opóźnić/czekać w wykonaniu kodu JavaScript?

Funkcje, które mogą opóźnić lub zatrzymać wykonywanie części kodu, są bardzo ważne w języku programowania, ponieważ są sposobem na kontrolowanie przepływu programu. Jest wiele wbudowanych „opóźnienie" Lub "Czekać”Funkcje dostępne w większości języków programowania. Ale w JavaScript nie ma opóźnienia, oczekiwania ani snu, ponieważ jest to język skryptowy, a języki skryptów są zawsze synchroniczne i jednoosobowe.

Początkowo może się to nie wydawać wielkim, ale w miarę postępów w świecie programowania zdasz sobie sprawę ze znaczenia funkcji „opóźnienia” i „czekających”. Tak więc, jeśli nie ma funkcji oczekiwania \ opóźnienia \ Sleep, nie ma możliwości kontrolowania wykonywania programu w JavaScript? Cóż, istnieją różne funkcje i metody, które pomagają nam osiągnąć to samo zadanie w JavaScript.

Korzystanie z funkcji Settimeout ()

Pierwszą i najczęstszą metodą wdrażania opóźnienia w wykonywaniu kodu JavaScript jest użycie settimeout () metoda. Popełnisz bardzo powszechny błąd, zakładając, że składnia jest:

Settimeout (opóźnienie w MS);

Podczas gdy w rzeczywistości ta metoda pełni funkcję wywołania zwrotnego. Mając to na uwadze, możemy spojrzeć na składnię jako:

Składnia funkcji settimeout ()

Settimeout (funkcja, opóźnienie w MS);

Aby lepiej zrozumieć działanie settimeout () Metoda, spróbujmy rozwiązać problem.

Przykład
Załóżmy, że chcemy wydrukować liczby od 1 do 10, z opóźnieniem 1 sekundy między każdą liczbą.

Tradycyjny sposób byłby:

dla (niech i = 1; i <=10 ; i++ )
Settimeout (1000);
konsola.log (i);

Wyjście kodu natychmiast drukuje wszystkie 10 cyfr, takie jak:

Ponieważ nie przekazujemy niczego do metody Settimeout ().

Aby dodać opóźnienie za pomocą metody Settimeout (), uważamy, że właściwy sposób jest:

dla (niech i = 1; pocieszam.log (i), 1000);

Zamiast uzyskać 1-sekundowe opóźnienie po każdej liczbie, otrzymujemy 1-sekundowe opóźnienie na początku, a następnie wszystkie liczby są drukowane natychmiast. Jak pokazano niżej:

Mieliśmy początkowe opóźnienie, ale później nie opóźniliśmy się. Dlaczego to jest takie? Cóż, sposób, w jaki settimeout () Działa, że ​​zawsze działa w trybie synchronicznym. Oznacza to, że nawet posiadanie wielu połączeń do tej samej funkcji spowoduje opóźnienie 1 sekundy.

To, co zrobiliśmy, to powołaliśmy każdy settimeout () metoda jeden po drugiej i ze względu na asynchroniczny charakter settimeout () metoda, nie czeka na poprzednie settimeout () metoda zakończenia, a następnie wykonania następnego.

Więc ostatecznie wykonaliśmy 10 połączeń settimeout () Metoda, która ma ten sam czas opóźnienia. Istnieje sposób, aby to naprawić, a to znaczy przy użyciu rosnącego timera opóźnienia:

settimeout (() => konsola.log (i), 1000);
settimeout (() => konsola.Log (i), 2000);
settimeout (() => konsola.log (i), 3000);

Powyższy przykład drukowania 10 liczb stałby się to:

dla (niech i = 1; pocieszam.log (i), i * 1000);

Używamy rosnącej wartości zmiennej „i” i mnożą ją z 1-sekundowym opóźnieniem, aby utworzyć opóźnienia przyrostowe dla każdego wezwania settimeout ()

Wyjście z tym staje się:

W końcu to zrobiliśmy. Ale wciąż coś jest nie tak. To jest fakt, że obliczanie opóźnień w ten sposób jest bardzo skomplikowane, szczególnie gdy pracujesz w rzeczywistej aplikacji. Jest też sposób na to, utwórz własną metodę opóźnienia/oczekiwania.

Jak kodować własną funkcję opóźnienia/oczekiwania?

Chcemy lepszego rozwiązania, to, co możemy zrobić, to kodować własne „opóźnienie" metoda. Będziemy używać settimeout () funkcjonowanie i obietnice pomoże nam stworzyć „opóźnienie„Metoda jako:

Po prostu utworzymy funkcję o nazwie „opóźnienia” i przekazamy jej czas w milisekundach. Ta funkcja „opóźnienia” zwraca obietnicę i nie pozwoli wykonać wykonania, dopóki obietnica nie zostanie rozwiązana.

Opóźnienie funkcji (MS)
zwróć nową obietnicę (rozdzielcz => settimeout (rozdzielcz, ms));

Teraz nazywamy tę funkcję „opóźnienia” za pomocą „.Następnie „Operator. Lubię to:

konsola.log („Hello”);
opóźnienie (2000).następnie (() => konsola.log („świat!"););

Wyjście byłoby:

Tworzymy obietnicę i settimeout () metoda z pewnym opóźnieniem rozstrzygać obietnica. Możesz przeczytać więcej o obietnice JavaScript.

Na wypadek, gdybyś chciał pozbyć się .Następnie() Metoda i, aby łagodzić opóźnienia, możemy użyć Async I czekać na z naszą funkcją „opóźnienia”.

Demo funkcji async ()
konsola.log („to jest”);
czekają na opóźnienie (1000);
konsola.log („Linuxhint”);
czekają na opóźnienie (1000);
konsola.dziennik („Samouczek!");

Uwaga: musimy dodać Async słowo kluczowe z funkcją wywołującą opóźnienie() metoda. Jeśli uruchomimy program, który otrzymamy, to:

Drukarkę do naszego problemu, drukarka liczbowa od 1 do 10, musimy utworzyć ją w funkcji asynchronizacji i wywołać metodę „opóźnienia”, którą właśnie stworzyliśmy:

Async Function NumberPrinter ()
dla (niech i = 1; i <= 10; i++)
konsola.log (i);
czekaj na opóźnienie (1000)

I musimy wywołać tę funkcję:

NumberPrinter ();

Wyjście, które otrzymujemy, to:

To jest dla naszej funkcji „opóźnienia”.

Wniosek

Nie ma wbudowanego Czekać, opóźnienie, lub funkcja snu w JavaScript, ale możemy użyć settimeout () metoda naśladowania zachowania opóźnienia, a możemy nawet kodować własne opóźnienie() metoda utworzenia opóźnienia w wykonywaniu programu. Nauczyliśmy się, jak settimeout () Metoda działa, jak powszechne jest błędne zrozumienie jej pracy i użycia. Ponadto nauczyliśmy się połączyć metodę Settimeout () z obietnice Aby stworzyć własną metodę opóźnienia, a także nauczyliśmy się używać Async I czekać na na naszej funkcji, aby poczekać, a następnie kontynuować wykonanie.