У цьому посібнику ви дізнаєтесь про метод JavaScript setTimeout () за допомогою прикладів.
setTimeout()Метод виконується блок коду по закінченні зазначеного часу. Метод виконує код лише один раз.
Найчастіше використовується синтаксис JavaScript setTimeout:
setTimeout(function, milliseconds);
Його параметри:
- function - функція, що містить блок коду
- мілісекунди - час, через який функція виконується
setTimeout()Метод повертає intervalID , який являє собою позитивне ціле число.
Приклад 1: Показувати текст раз на 3 секунди
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) setTimeout(greet, 3000); console.log('This message is shown first');
Вихідні дані
Це повідомлення відображається першим Привіт світ
У наведеній вище програмі setTimeout()метод викликає greet()функцію через 3000 мілісекунд ( 3 секунди).
Отже, програма відображає текст Hello world лише один раз через 3 секунди.
Примітка : setTimeout()Метод корисний, коли потрібно виконати блок один раз через деякий час. Наприклад, показ повідомлення користувачеві через зазначений час.
setTimeout()Метод повертає інтервал ідентифікатор. Наприклад,
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) let intervalId = setTimeout(greet, 3000); console.log('Id: ' + intervalId);
Вихідні дані
Id: 3 Привіт світ
Приклад 2: Час відображення кожні 3 секунди
// 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();
Вихідні дані
17:45:39 17:45:43 17:45:47 17:45:50 …
Наведена вище програма відображає час кожні 3 секунди.
setTimeout()Метод викликає функцію тільки один раз після інтервалу часу (тут 3 секунди).
Однак у вищезазначеній програмі, оскільки функція викликає себе, програма відображає час кожні 3 секунди.
Ця програма працює необмежено довго (до закінчення пам'яті).
Примітка : Якщо вам потрібно виконати функцію кілька разів, краще скористатися setInterval()методом.
JavaScript clearTimeout ()
Як ви бачили у наведеному вище прикладі, програма виконує блок коду через зазначений інтервал часу. Якщо ви хочете зупинити цей виклик функції, ви можете скористатися clearTimeout()методом.
Синтаксис clearTimeout()методу:
clearTimeout(intervalID);
Тут intervalIDзначення повернення setTimeout()методу.
Приклад 3: Використовуйте метод 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.');
Вихідні дані
setTimeout зупинено.
У наведеній вище програмі setTimeout()метод використовується для збільшення значення рахунку через 3 секунди. Однак clearTimeout()метод зупиняє виклик функції setTimeout()методу. Отже, значення підрахунку не збільшується.
Примітка : Зазвичай ви використовуєте clearTimeout()метод, коли вам потрібно скасувати setTimeout()виклик методу до того, як це станеться.
Ви також можете передати додаткові аргументи setTimeout()методу. Синтаксис:
setTimeout(function, milliseconds, parameter1,… .paramenterN);
При передачі додаткових параметрів setTimeout()методу, ці параметри ( parameter1, parameter2і т.д.) будуть передані зазначеної функції .
Наприклад,
// program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setTimeout setTimeout(greet, 1000, 'John', 'Doe');
Вихідні дані
Привіт Джон Доу
У наведеній вище програмі, два параметра Johnі Doeпередаються setTimeout()методу. Ці два параметри є аргументами, які будуть передані функції (тут greet()функція), яка визначена всередині setTimeout()методу.
Рекомендоване читання: JavaScript async () і await ()
