setTimeout и setInterval

setTimeout берёт функцию и число миллисекунд и говорит браузеру: «вызови её потом». Программа на этом не останавливается — строки ниже выполнятся сразу, а колбэк дождётся своей очереди.

setTimeout(() => {
  console.log("прошла секунда");
}, 1000);
console.log("а это уже сейчас");

Вызов возвращает идентификатор таймера — в браузере это число. Пока время не вышло, по идентификатору таймер можно отменить: clearTimeout(id). Отменять уже сработавший или несуществующий таймер безопасно — просто ничего не произойдёт.

const id = setTimeout(() => console.log("не сработает"), 1000);
clearTimeout(id);
setTimeout(() => console.log("а вот я сработаю"), 200);

Если колбэку нужны данные, их перечисляют после задержки — третьим, четвёртым и любым следующим аргументом. Вариант с обёрткой setTimeout(() => sum(4, 5), 500) тоже рабочий и часто читается понятнее.

function sum(a, b) {
  console.log(a + b);
}
setTimeout(sum, 500, 4, 5);

А вот скобки после имени функции — классическая ловушка. setTimeout(ping, 500) передаёт саму функцию, а setTimeout(ping(), 500) сначала вызывает ping прямо сейчас и отдаёт таймеру то, что она вернула, — обычно undefined. Таймер честно отсчитает полсекунды и ничего не сделает.

function ping() {
  console.log("пинг");
}
setTimeout(ping(), 500);

const user = {
  login: "anya",
  say() {
    console.log("Я " + this.login);
  }
};
setTimeout(user.say, 100);
setTimeout(() => user.say(), 100);

setInterval устроен точно так же — те же аргументы, тот же идентификатор, — но повторяет вызов, пока его не остановят через clearInterval. Забыть про остановку легко, и тогда таймер будет тикать до перезагрузки страницы.

let n = 0;
const id = setInterval(() => {
  n = n + 1;
  console.log(n);
  if (n === 3) clearInterval(id);
}, 300);

Задержка — это не «через 300 мс», а «не раньше чем через 300 мс». Очередь может быть занята.

Есть тонкость, из-за которой интервалы часто ведут себя не так, как ждут: пауза отсчитывается от старта предыдущего вызова, а не от его конца. Если колбэк работает 900 мс при интервале в 1000, на отдых остаётся сотня. А если он затянется дольше интервала, вызовы пойдут вплотную, друг за другом.

Ту же периодичность можно собрать из одиночных таймеров: колбэк в конце своей работы планирует сам себя. Тогда пауза отсчитывается от конца предыдущего вызова и всегда получается полной — сколько бы ни длилась работа внутри.

let n = 0;
function tick() {
  n = n + 1;
  console.log("тик " + n);
  if (n < 3) setTimeout(tick, 300);
}
setTimeout(tick, 300);

Бонусом задержку можно менять на ходу: перед следующим планированием подставьте другое число. Так делают опрос сервера с нарастающей паузой — 100 мс, 200, 400, 800, — чтобы не бомбить его запросами, пока он лежит.

setTimeout(f, 0) не выполняет f немедленно. Это значит «выполни, как только освободится очередь», то есть после всего синхронного кода. Приём удобен, когда нужно дать браузеру вдохнуть: дорисовать страницу, отреагировать на клик — и уже потом продолжить.

console.log("один");
setTimeout(() => console.log("три"), 0);
console.log("два");

И самого нуля браузер не обещает. По стандарту с седьмого таймера в цепочке вложенных друг в друга задержка зажимается минимум до 4 мс, а в неактивной вкладке задержка вырастает до секунды и больше. Отсчитывать время таймерами не стоит — для этого есть Date.now() и performance.now().

const start = Date.now();
let step = 0;
function next() {
  step = step + 1;
  if (step < 10) setTimeout(next, 0);
  else console.log(step + " шагов заняли больше 15 мс:", Date.now() - start > 15);
}
setTimeout(next, 0);