W tym samouczku dowiesz się o metodzie JavaScript setInterval () na podstawie przykładów.
W JavaScript blok kodu może być wykonywany w określonych odstępach czasu. Te przedziały czasu są nazywane zdarzeniami czasowymi.
Istnieją dwie metody wykonywania kodu w określonych odstępach czasu. Oni są:
- setInterval ()
- setTimeout ()
W tym samouczku poznasz setInterval()metodę.
JavaScript setInterval ()
setInterval()Sposób powtarza blok kodu w każdym danym zdarzeniu czasowym.
Powszechnie stosowana składnia JavaScript setInterval to:
setInterval(function, milliseconds);
Jego parametry to:
- funkcja - funkcja zawierająca blok kodu
- milisekundy - przedział czasu między wykonaniem funkcji
setInterval()Sposób zwraca intervalID który jest dodatnią liczbą całkowitą.
Przykład 1: Wyświetlaj tekst raz na sekundę
// program to display a text using setInterval method function greet() ( console.log('Hello world'); ) setInterval(greet, 1000);
Wynik
Witaj świecie Witaj świecie Witaj świecie Witaj świecie Witaj świecie….
W powyższym programie setInterval()metoda wywołuje greet()funkcję co 1000 milisekund ( 1 sekunda).
Dlatego program wyświetla tekst Hello world co 1 sekundę.
Uwaga : Ta setInterval()metoda jest przydatna, gdy chcesz wielokrotnie powtórzyć blok kodu. Na przykład wyświetlanie wiadomości w stałych odstępach czasu.
Przykład 2: Czas wyświetlania co 5 sekund
// program to display time every 5 seconds function showTime() ( // return new date and time let dateTime= new Date(); // return the time let time = dateTime.toLocaleTimeString(); console.log(time) ) let display = setInterval(showTime, 5000);
Wynik
„17:15:28” „17:15:33” „17:15:38”….
Powyższy program wyświetla aktualny czas co 5 sekund.
new Date()podaje aktualną datę i godzinę. I toLocaleTimeString()zwraca aktualny czas. Aby dowiedzieć się więcej o dacie i godzinie, odwiedź stronę JavaScript Data i godzina.
JavaScript clearInterval ()
Jak widzieliśmy w powyższym przykładzie, program wykonuje blok kodu w każdym określonym przedziale czasu. Jeśli chcesz zatrzymać to wywołanie funkcji, możesz użyć clearInterval()metody.
Składnia clearInterval()metody to:
clearInterval(intervalID);
Tutaj intervalIDjest wartością zwracaną przez setInterval()metodę.
Przykład 3: Użyj metody clearInterval ()
// program to stop the setInterval() method after five times let count = 0; // function creation let interval = setInterval(function()( // increasing the count by 1 count += 1; // when count equals to 5, stop the function if(count === 5)( clearInterval(interval); ) // display the current time let dateTime= new Date(); let time = dateTime.toLocaleTimeString(); console.log(time); ), 2000);
Wynik
16:47:41 4:47:43 PM 4:47:45 PM 4:47:47 4:47:49 PM
W powyższym programie setInterval()metoda służy do wyświetlania aktualnego czasu co 2 sekundy. clearInterval()Sposób przerywa połączenie funkcji po 5 godzinach.
Możesz także przekazać do setInterval()metody dodatkowe argumenty . Składnia jest następująca:
setInterval(function, milliseconds, parameter1,… .paramenterN);
Po przejechaniu dodatkowych parametrów do setInterval()metody te parametry ( parameter1, parameter2etc.) będą przekazywane do określonej funkcji .
Na przykład,
// program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setInterval setInterval(greet, 1000, 'John', 'Doe');
Wynik
Witaj John Doe Witaj John Doe Witaj John Doe….
W powyższym programie dwa parametry Johni Doesą przekazywane do setInterval()metody. Te dwa parametry to argumenty, które zostaną przekazane do funkcji (w tym przypadku greet()funkcji) zdefiniowanej wewnątrz setInterval()metody.
Uwaga: Jeśli potrzebujesz wykonać funkcję tylko raz, lepiej jest użyć metody setTimeout ().
