Wydarzenia czasowe w JavaScript

Zdarzenia, które są wystrzelone w określonym przedziale czasowym w celu wykonania JavaScript Kod są znane jako zdarzenia czasowe. Można je użyć do opóźnienia wykonywania kodu lub do wykonywania bloku kodu wielokrotnego po określonym przedziale czasowym. Wydarzenia te nazywane są metodami globalnymi, ponieważ są one bezpośrednio dostępne w HTML DOM i można je wywołać z dowolnego miejsca w kodzie.

Jak wykonać kod JavaScript po określonym przedziale czasowym

Wykonać JavaScript Kod po określonym przedziale czasowym używany jest obiekt okna.

Istnieją dwie główne/podstawowe metody, stosowane do zdarzeń czasowych:

• funkcja settimeout ()
• funkcja setInterval ()

Obie powyższe funkcje służą do uruchomienia bloku dostarczonego im jako funkcji do wykonania w określonym przedziale czasowym, ale z subtelną różnicą. Zacznijmy od spojrzenia na składni zarówno funkcji, jak i różnice między tymi składniami:

Funkcja settimeout () w JavaScript

Składnia funkcja settimeout () Jest:

settimeout (funkcja, timeinterval)
// Lub
okno.settimeout (funkcja, timeinterval)

Ponieważ wiemy, że obiekt okna jest używany do wykonywania kodu JavaScript po określonym przedziale czasu settimeout () Lub funkcja setInterval (), Oboje będą pracować tak samo.

funkcja settimeout () bierze dwa argumenty jako parametry:

• Jedna jest funkcją, którą należy wykonać
• Drugi to przedział czasu w milisekundach, po czym wykonywana zostanie funkcja określona w pierwszym parametrze.

funkcja settimeout () służy do wykonania dostarczonej funkcji raz po oczekiwaniu na zakończenie przedziału czasowego.

Jak zatrzymać wykonanie funkcji Settimeout ()

Czasami musimy zatrzymać wykonywanie funkcji zdefiniowanej/wywołanej w funkcja settimeout () Przed osiągnięciem nawet wspomnianego czasu. Na przykład, podczas ładowania danych z serwera, pokazujemy ładowarki w aplikacji internetowej, gdy dane są pobierane przed oczekiwanym czasem, możemy po prostu zatrzymać ładowarkę i pokazać dane.

funkcja cleartimeout () w JavaScript

Aby zatrzymać wykonanie funkcja settimeout (), funkcja cleartimeout () Jest używane:

Składnia

Składnia funkcja cleartimeout () Jest:

Cleartimeout (SettimeoutVariable)

funkcja cleartimeout () Po prostu przyjmuje nazwę zmiennej, która została zwrócona przez funkcję Settimeout ().

Na przykład, jeśli zadzwoniliśmy funkcja settimeout ():

holdexec = settimeout (() =>
konsola.log (gotowe);
, 5000)

Teraz, aby zatrzymać wykonanie funkcja settimeout () Przed zakończeniem przedziału czasowego musimy podać „Holdexec”Zmienna jako argument dla funkcja cleartimeout () i funkcja cleartimeout () Poszedłbym tak:

Cleartimeout (holdexec);

Jeśli funkcja wewnątrz funkcja settimeout () nie jest wykonywany, a następnie wykonanie funkcja settimeout () zostanie zatrzymany.

funkcja setInterval () w JavaScript

funkcja setInterval () a jego składnia jest prawie taka sama jak funkcja settimeout () Jednak jedyną różnicą między nimi jest to, że funkcja setInterval () ciągle wykonuje funkcję po osiągnięciu przedziału czasu.

Składnia funkcja setInterval Jest:

setInterval (funkcja, timeinterval)

funkcja setInterval () Bierze także dwa argumenty jako parametry:

• Jedna jest funkcją, którą należy wykonywać za każdym razem po określonym przedziale czasowym.
• Drugi parametr to przedział czasu, po którym funkcja będzie wykonywana wielokrotnie.

Teraz pojawia się pytanie, jeśli funkcja setInterval () ciągle wykonywa funkcję, a następnie w jaki sposób możemy zatrzymać wykonanie? Następna sekcja wyjaśni to:

Jak zatrzymać wykonywanie funkcji setInterval ()

Cóż, tak jak funkcja cleartimeout (), Mamy również możliwość zatrzymania wykonywania funkcja setInterval ().

Funkcja ClearInterval () w JavaScript

Aby zatrzymać wykonanie funkcja setInterval (), Funkcja ClearInterval () Jest używane:

Składnia

Składnia Funkcja ClearInterval () Jest:

clearInterval (setIntervalVariable)

Funkcja ClearInterval () po prostu przyjmuje nazwę zmiennej, która została zwrócona przez funkcja setInterval ().

Na przykład, jeśli zadzwonimy funkcja setInterval ():

holdexec = setInterval (() =>
konsola.Log (trzymanie…);
, 100)

Teraz, aby zatrzymać wykonanie funkcja setInterval () Ilekroć chcemy, musimy po prostu dostarczyć „Holdexec”Zmienna jako argument dla Funkcja ClearInterval () i Funkcja ClearInterval () Poszedłbym tak:

clearInterval (holdexec);

Wykonanie funkcja setInterval () zostanie zatrzymany w prawo, gdy uruchomisz wyżej wymienione Funkcja ClearInterval ().

Wniosek

JavaScript oferuje programistom szereg metod asynchronicznego wykonania bloku kodu; Metody te są nazywane zdarzeniami czasowymi. Zdarzenia czasowe umożliwiają okresowe wykonywanie kodu JavaScript; Umożliwiają również programistowi opóźnienie wykonywania niektórych bloków kodu. W tym samouczku omówiliśmy podstawy zdarzeń czasowych w JavaScript; Nauczyliśmy się, czym są i jak ich używać w naszym kodzie.