W tym samouczku dowiesz się o metodzie JavaScript setTimeout () na podstawie przykładów.
setTimeout()Sposób realizuje blok kodu, po upływie określonego czasu. Metoda wykonuje kod tylko raz.
Powszechnie używana składnia JavaScript setTimeout to:
setTimeout(function, milliseconds);
Jego parametry to:
- funkcja - funkcja zawierająca blok kodu
- milisekundy - czas, po którym funkcja jest wykonywana
setTimeout()Sposób zwraca intervalID , który jest dodatnią liczbą całkowitą.
Przykład 1: Wyświetl tekst raz po 3 sekundach
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) setTimeout(greet, 3000); console.log('This message is shown first');
Wynik
Ta wiadomość jest wyświetlana jako pierwsza Hello world
W powyższym programie setTimeout()metoda wywołuje greet()funkcję po 3000 milisekund ( 3 sekundy).
Dlatego program wyświetla tekst Hello world tylko raz po 3 sekundach.
Uwaga : setTimeout()Metoda jest przydatna, gdy chcesz wykonać blok raz po pewnym czasie. Na przykład wyświetlenie wiadomości użytkownikowi po określonym czasie.
setTimeout()Sposób powraca odstępu ID. Na przykład,
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) let intervalId = setTimeout(greet, 3000); console.log('Id: ' + intervalId);
Wynik
Id: 3 Witaj, świecie
Przykład 2: Czas wyświetlania co 3 sekundy
// program to display time every 3 seconds function showTime() ( // return new date and time let dateTime= new Date(); // returns the current local time let time = dateTime.toLocaleTimeString(); console.log(time) // display the time after 3 seconds setTimeout(showTime, 3000); ) // calling the function showTime();
Wynik
17:45:39 17:45:43 17:45:47 17:45:50…
Powyższy program wyświetla czas co 3 sekundy.
setTimeout()Metoda wywołuje funkcję tylko raz po przedziale czasu (tutaj 3 sekundy).
Jednak w powyższym programie, ponieważ funkcja wywołuje samą siebie, program wyświetla czas co 3 sekundy.
Ten program działa w nieskończoność (do wyczerpania pamięci).
Uwaga : jeśli chcesz wykonać funkcję wiele razy, lepiej użyć tej setInterval()metody.
JavaScript clearTimeout ()
Jak widać w powyższym przykładzie, program wykonuje blok kodu po upływie określonego czasu. Jeśli chcesz zatrzymać to wywołanie funkcji, możesz użyć clearTimeout()metody.
Składnia clearTimeout()metody to:
clearTimeout(intervalID);
Tutaj intervalIDjest wartością zwracaną przez setTimeout()metodę.
Przykład 3: Użyj metody clearTimeout ()
// program to stop the setTimeout() method let count = 0; // function creation function increaseCount()( // increasing the count by 1 count += 1; console.log(count) ) let id = setTimeout(increaseCount, 3000); // clearTimeout clearTimeout(id); console.log('setTimeout is stopped.');
Wynik
setTimeout jest zatrzymany.
In the above program, the setTimeout() method is used to increase the value of count after 3 seconds. However, the clearTimeout() method stops the function call of the setTimeout() method. Hence, the count value is not increased.
Note: You generally use the clearTimeout() method when you need to cancel the setTimeout() method call before it happens.
You can also pass additional arguments to the setTimeout() method. The syntax is:
setTimeout(function, milliseconds, parameter1,… .paramenterN);
When you pass additional parameters to the setTimeout() method, these parameters (parameter1, parameter2, etc.) will be passed to the specified function.
For example,
// program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setTimeout setTimeout(greet, 1000, 'John', 'Doe');
Output
Hello John Doe
W powyższym programie dwa parametry Johni Doesą przekazywane do setTimeout()metody. Te dwa parametry to argumenty, które zostaną przekazane do funkcji (w tym przypadku greet()funkcji) zdefiniowanej wewnątrz setTimeout()metody.
Zalecana lektura: JavaScript async () i await ()
