Wyjaśnione metody JavaScript SetInterval i Settimeout

JavaScript to język programowania na wysokim poziomie, w którym każde instrukcja kodu jest wykonywana według wiersza. Załóżmy jednak, że chcesz wykonać jakiś kod lub funkcję na późniejszym etapie (w przyszłości) i nie od razu. Nazywa się to planowaniem połączenia w JavaScript i można go osiągnąć za pomocą dwóch wbudowanych metod; settimeout () I setInterval ().

Ten post omawia, co setInterval () I settimeout () Wbudowane metody są w JavaScript. Jednak zanim przejdziemy dalej, należy zauważyć, że te dwie metody nie są częścią specyfikacji JavaScript i są częścią standardowej specyfikacji HTML, ale są obsługiwane we wszystkich głównych przeglądarkach.

Jaka jest metoda Settimeout ()?

settimeout () Metoda jest używana do uruchomienia określonego kodu w przyszłości, a nie od razu poprzez wywołanie funkcji wywołania zwrotnego po określonym przedziale czasowym. Funkcja wywołania zwrotnego jest zdefiniowana jako funkcja podana do innej funkcji jako argument i wykonywana w funkcji zewnętrznej później.

Składnia metody Settimeout ()

składnia z settimeout () podano poniżej:

Settimeout (callbackfunc, milisekunds);

Pierwszy argument, który podajemy settimeout () Metoda to funkcja wywołania zwrotnego, która jest wykonywana po dostarczonych milisekundach.

Przykład
Przejrzyjmy przykład, w którym ustawymy settimeout () Metoda na przycisku, a gdy użytkownik kliknie ten przycisk, funkcje wywołania zwrotnego zostaną wykonane po 2 sekundach:

Spróbuj

W funkcji wywołania zwrotnego zainicjowaliśmy alert, który wyświetli się po dwóch sekundach z komunikatem Witam.

Jaka jest metoda setInterval ()?

setInterval () Metoda jest taka sama jak settimeout () ponieważ wykonuje również funkcję wywołania zwrotnego po określonym czasie, ale z wyjątkiem, że wykonuje funkcję wywołania zwrotnego w sposób ciągły.

Składnia metody setInterval ()

składnia z setInterval () Metoda jest następująca:

setInterval (MyFunc, milisekunds);

Tak jak settimeout () Pierwszym argumentem jest funkcja wywołania zwrotnego, która zostanie wykonana po określonej liczbie milisekund, a wykonanie będzie powtarzane w sposób ciągły po tym konkretnym czasie.

Przykład
Przejrzyjmy przykład, w którym pokażemy obecny czas systemu po 1 sekundzie.

const myFunc = () =>
const d = new Date ();
konsola.Log (d.Tolokaletymestring ());

setInterval (MyFunc, 1000);

W powyższym kodzie najpierw utworzyliśmy funkcję, w której utworzyliśmy nową datę za pomocą Data Obiekt i konsola zarejestrowały czas systemu.

Po zdefiniowaniu funkcji użyliśmy setInterval () Metoda, przekazała nazwę funkcji i 1000 milisekund, czyli 1 sekunda. Teraz funkcja będzie działać co 1 sekunda, a po każdej sekundzie zobaczymy czas naszego systemu na dzienniku konsoli:

Zatrzymanie wykonania Settimeout () i setInterval ()

Jeśli nie chcesz funkcji wywołania zwrotnego setInterval () Lub settimeout () Aby wykonać już, możemy użyć metod zatrzymania dostępnych w JavaScript dla obu z nich.

metoda cleartimeout ()
Aby zatrzymać wykonanie settimeout () funkcja, której możemy użyć cleartimeout () Metoda, która przyjmie zmienną/id, który jest zwracany z settimeout () Metoda jako argument.

Przykład
W tym przykładzie zatrzymamy wykonywanie funkcji odwołania zdefiniowanej metodą Settimeout ():

Spróbuj
Zatrzymywać się

Powyższy kod jest rozszerzoną formą przykładu Settimeout () pokazanego wcześniej. W tym kodzie dodaliśmy kolejny przycisk o nazwie Zatrzymywać się i wywołał funkcję Stop (), gdy użytkownik kliknie przycisk Stop. Funkcja Stop () ma czyste czasy (), która ma zmienną t jako argument. Zmienna t jest po prostu identyfikatorem zwróconym z funkcji Settimeout ().

Gdy użytkownik kliknie Próbować przycisk IT, a następnie po trzech sekundach widzimy Cześć w alercie, jak pokazano wcześniej. Jeśli jednak użytkownik kliknie przycisk Stop przed 3 sekundami, funkcja oddzwonienia MyFunkcja nie zostanie wywołana, a zatem nie zobaczymy alertu. Zjawisko to pokazano poniżej:

metoda clearInterval ()
Podobnie, aby zatrzymać wykonanie setInterval () funkcja, możemy użyć clearInterval () metoda, która również przyjmie zmienną zwróconą z setInterval () jako argument.

Przykład

Przejrzyjmy przykład, w którym zatrzymamy wykonanie funkcji wywołania zwrotnego setInterval () metoda.

Zatrzymaj czas

W powyższym kodzie zdefiniowaliśmy przycisk w HTML, a następnie zainicjowaliśmy zdarzenie OnClick na tym przycisku. Gdy użytkownik kliknie zdefiniowany przycisk, setInterval () Metoda przestanie wykonywać.

Po kliknięciu przycisku „Czas zatrzymania” czas systemowy przestał wyświetlać na naszym dzienniku konsoli:

Wniosek

settimeout () I setInterval () Metody oba rozkładu wywołania, które ma na celu wykonanie funkcji później po określonej liczbie milisekund z wyjątkiem setInterval () wykonuje funkcję w sposób ciągły po tym konkretnym czasie, w przeciwieństwie do settimeout () Metoda, która wykonuje funkcję tylko raz po określonym czasie.

W tym poście omówiliśmy, co settimeout () I setInterval () Metoda jest i widzieliśmy ich przykłady wraz z zrzutami ekranu wyjścia. Ostatecznie widzieliśmy również, jak zatrzymać wykonywanie funkcji wywołania zwrotnego settimeout () I setInterval () metody.