4.1 Функция setTimeout
Таймеры в JavaScript позволяют выполнять определенные действия через заданные промежутки времени. Два основных метода для работы с таймерами — это setTimeout() и setInterval(). Они используются для выполнения кода с задержкой или через регулярные интервалы времени.
Метод setTimeout() позволяет выполнять функцию один раз через определенное количество миллисекунд. Это полезно для отложенного выполнения кода.
Синтаксис:
const timeoutID = setTimeout(callback, delay, ...args);
Где:
callback: функция, которая будет выполненаdelay: задержка в миллисекундах перед выполнением функцииargs: дополнительные аргументы, которые будут переданы в функциюcallback
Пример использования setTimeout():
// Функция, которая будет выполнена через 2 секунды
function greet() {
console.log('Hello, world!');
}
// Установка таймера
const timeoutID = setTimeout(greet, 2000);
4.2 Отмена таймера setTimeout
Если нужно отменить выполнение функции, запланированной через setTimeout(), можно использовать метод clearTimeout():
// Функция, которая будет выполнена через 2 секунды
function greet() {
console.log('Hello, world!');
}
// Установка таймера
const timeoutID = setTimeout(greet, 2000);
// Отмена таймера
clearTimeout(timeoutID);
Пример с дополнительными аргументами:
// Функция, которая будет выполнена через 2 секунды с аргументами
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Установка таймера с передачей аргумента
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 Функция setInterval
Метод setInterval() позволяет выполнять функцию повторно через заданные интервалы времени. Это полезно для периодического выполнения кода.
Синтаксис:
const intervalID = setInterval(callback, delay, ...args);
Где:
callback: функция, которая будет выполнятьсяdelay: интервал в миллисекундах между вызовами функцииargs: дополнительные аргументы, которые будут переданы в функциюcallback
Пример использования setInterval:
// Функция, которая будет выполняться каждые 2 секунды
function greet() {
console.log('Hello, world!');
}
// Установка интервала
const intervalID = setInterval(greet, 2000);
4.4 Отмена интервала setInterval
Если нужно остановить повторное выполнение функции, можно использовать метод clearInterval().
// Функция, которая будет выполняться каждые 2 секунды
function greet() {
console.log('Hello, world!');
}
// Установка интервала
const intervalID = setInterval(greet, 2000);
// Отмена интервала через 10 секунд
setTimeout(() => {
clearInterval(intervalID);
console.log('Interval cleared');
}, 10000);
Пример с дополнительными аргументами:
// Функция, которая будет выполняться каждые 2 секунды с аргументами
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Установка интервала с передачей аргумента
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 Примеры практического использования
Пример 1: Автономное обновление времени
<!DOCTYPE html>
<html>
<head>
<title>Auto-update Time</title>
</head>
<body>
<h1>Current Time</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('Fetching data...');
// Здесь можно выполнить реальный запрос к серверу
}
// Выполнение запроса данных каждые 10 секунд
const intervalID = setInterval(fetchData, 10000);
// Остановка запросов через 1 минуту
setTimeout(() => {
clearInterval(intervalID);
console.log('Stopped fetching data');
}, 60000);
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ