setTimeout и setInterval: выполнение кода с задержкой или периодически

⏳ Введение: Асинхронное время в JavaScript

Представьте, что JavaScript — это шеф-повар 🧑‍🍳, который может готовить только одно блюдо за раз. Но что, если ему нужно поставить пирог в духовку и заняться салатом, пока пирог печется? Здесь на помощь приходят setTimeout и setInterval — инструменты для управления временем выполнения кода.

🔹 `setTimeout`: Однократная задержка

setTimeout позволяет выполнить функцию один раз через указанное время.

setTimeout(() => {
  console.log('Привет через 3 секунды!');
}, 3000); // 3000 миллисекунд = 3 секунды

Как это работает:

Первый аргумент — функция (или строка кода, но лучше избегать).
Второй аргумент — задержка в миллисекундах (1000 мс = 1 сек).
Возвращает ID таймера, который можно использовать для отмены.

Отмена выполнения:

const timerId = setTimeout(() => console.log('Это не сработает'), 2000);
clearTimeout(timerId); // Отменяем таймер

💡 Совет: Всегда сохраняйте timerId в переменную, если планируете отмену.

🔄 `setInterval`: Периодическое выполнение

Если нужно повторять действие каждые N секунд, используйте setInterval:

let counter = 0;
const intervalId = setInterval(() => {
  counter++;
  console.log(`Прошло ${counter} секунд`); 
}, 1000); // Каждую секунду

Остановка интервала:

if (counter >= 5) {
  clearInterval(intervalId); // Остановить после 5 итераций
}

Пример: Таймер обратного отсчета 🕒

let timeLeft = 10;
const countdown = setInterval(() => {
  console.log(timeLeft);
  timeLeft--;
  if (timeLeft < 0) {
    clearInterval(countdown);
    console.log('Время вышло! 💥');
  }
}, 1000);

⚠️ Важные нюансы

1. Точность времени

JavaScript — однопоточный. Если главный поток занят, setTimeout/setInterval будут ждать:

setTimeout(() => console.log('Я опоздал!'), 1000);
// Долгая операция:
for (let i = 0; i < 1e9; i++) {} // Задержит вывод

2. Накопление ошибок в `setInterval`

Если код внутри setInterval выполняется дольше, чем интервал, вызовы начнут накладываться.

Решение: Использовать рекурсивный setTimeout:

function repeat() {
  console.log('Повторяюсь как попугай 🦜');
  setTimeout(repeat, 1000); // Следующий вызов — после завершения текущего
}
repeat();

🎯 Практические примеры

1. Анимация с `setTimeout`

Простейшая анимация движения:

const element = document.querySelector('.box');
let position = 0;

function move() {
  position += 5;
  element.style.left = `${position}px`;
  if (position < 300) {
    setTimeout(move, 50);
  }
}
move();

2. Периодический запрос данных

Эмуляция запросов к API каждые 5 секунд:

function fetchData() {
  console.log('Запрашиваю данные с сервера...');
  // Здесь мог бы быть fetch()
}

const apiPolling = setInterval(fetchData, 5000);
// Остановить через 30 секунд:
setTimeout(() => clearInterval(apiPolling), 30000);

📌 Итоги

setTimeout(func, delay) — выполнить func один раз через delay мс.
setInterval(func, interval) — выполнять func каждые interval мс.
clearTimeout/clearInterval — остановить выполнение.
Для точности используйте рекурсивный setTimeout вместо setInterval.

Теперь вы управляете временем в JavaScript, как доктор Стрэндж с Манипуляцией Временем! ⏳✨

Если хотите глубже погрузиться в асинхронность, посмотрите разбор Данилы Бежина про Event Loop — там волшебство становится наукой.