4.1 Функція setTimeout
Таймери в JavaScript дозволяють виконувати певні дії через задані проміжки часу. Два основних методи для роботи з таймерами — це setTimeout() і setInterval(). Вони використовуються для виконання коду із затримкою або через регулярні інтервали часу.
Метод setTimeout() дозволяє виконати функцію один раз через певну кількість мілісекунд. Це корисно для відкладеного виконання коду.
Синтаксис:
const timeoutID = setTimeout(callback, delay, ...args);
Де:
callback: функція, яка буде виконанаdelay: затримка у мілісекундах перед виконанням функціїargs: додаткові аргументи, які будуть передані у функціюcallback
Приклад використання setTimeout():
// Функція, яка буде виконана через 2 секунди
function greet() {
console.log('Привіт, світе!');
}
// Встановлення таймера
const timeoutID = setTimeout(greet, 2000);
4.2 Скасування таймера setTimeout
Якщо потрібно скасувати виконання функції, запланованої через setTimeout(), можна використати метод clearTimeout():
// Функція, яка буде виконана через 2 секунди
function greet() {
console.log('Привіт, світе!');
}
// Встановлення таймера
const timeoutID = setTimeout(greet, 2000);
// Скасування таймера
clearTimeout(timeoutID);
Приклад з додатковими аргументами:
// Функція, яка буде виконана через 2 секунди з аргументами
function greet(name) {
console.log(`Привіт, ${name}!`);
}
// Встановлення таймера з передачею аргументу
const timeoutID = setTimeout(greet, 2000, 'Аліса');
4.3 Функція setInterval
Метод setInterval() дозволяє виконувати функцію повторно через задані інтервали часу. Це корисно для періодичного виконання коду.
Синтаксис:
const intervalID = setInterval(callback, delay, ...args);
Де:
callback: функція, яка буде виконуватисьdelay: інтервал у мілісекундах між викликами функціїargs: додаткові аргументи, які будуть передані у функціюcallback
Приклад використання setInterval:
// Функція, яка буде виконуватись кожні 2 секунди
function greet() {
console.log('Привіт, світе!');
}
// Встановлення інтервалу
const intervalID = setInterval(greet, 2000);
4.4 Скасування інтервалу setInterval
Якщо потрібно зупинити повторне виконання функції, можна використати метод clearInterval().
// Функція, яка буде виконуватись кожні 2 секунди
function greet() {
console.log('Привіт, світе!');
}
// Встановлення інтервалу
const intervalID = setInterval(greet, 2000);
// Скасування інтервалу через 10 секунд
setTimeout(() => {
clearInterval(intervalID);
console.log('Інтервал скасовано');
}, 10000);
Приклад з додатковими аргументами:
// Функція, яка буде виконуватись кожні 2 секунди з аргументами
function greet(name) {
console.log(`Привіт, ${name}!`);
}
// Встановлення інтервалу з передачею аргументу
const intervalID = setInterval(greet, 2000, 'Аліса');
4.5 Приклади практичного використання
Приклад 1: Автоматичне оновлення часу
<!DOCTYPE html>
<html>
<head>
<title>Автооновлення часу</title>
</head>
<body>
<h1>Поточний час</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// Оновлення часу кожну секунду
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Приклад 2: Періодичний запит даних
// Функція для емуляції запиту даних
function fetchData() {
console.log('Отримання даних...');
// Тут можна виконати реальний запит до сервера
}
// Виконання запиту даних кожні 10 секунд
const intervalID = setInterval(fetchData, 10000);
// Зупинка запитів через 1 хвилину
setTimeout(() => {
clearInterval(intervalID);
console.log('Запитання даних зупинено');
}, 60000);
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ