0Pricing
JavaScript Academy · Урок

setTimeout, setInterval и дрейф таймера

Планируйте разовые и повторяющиеся задачи с помощью setTimeout и setInterval и изучите простой способ уменьшить дрейф таймера

«setTimeout, setInterval и дрейф таймера» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.

Введение в таймеры

Цель: правильно планировать выполнение задач.

  • setTimeout: выполнить позже (один раз)
  • setInterval: выполнять многократно
  • Drift: почему таймеры сбиваются
  • Простое исправление смещения
setTimeout, setInterval и дрейф таймера — иллюстрация 1

setTimeout — однократный запуск

setTimeout(функция, миллисекунды) выполняется один раз after задержки (это минимальная задержка, а не точное время).

// setTimeout schedules a one-off callback
console.log("A: start");

setTimeout(function () {
  console.log("B: after ~5ms");
}, 5);

console.log("C: scheduled");
setTimeout, setInterval и дрейф таймера — иллюстрация 2

setInterval — повторяющийся запуск

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

// setInterval repeats; always clear it
let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick", count);

  // Stop after 3 ticks to avoid endless logs
  if (count >= 3) {
    clearInterval(id);
    console.log("stopped");
  }
}, 5);
setTimeout, setInterval и дрейф таймера — иллюстрация 3

Наблюдаем смещение

Фактические интервалы различаются: работа программы, нагрузка на устройство и цикл событий вызывают смещение.

// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;

const driftId = setInterval(function () {
  const now = Date.now();
  const gap = now - last; // actual gap
  last = now;
  times = times + 1;
  console.log("gap~", gap, "ms");

  if (times >= 3) {
    clearInterval(driftId);
    console.log("done");
  }
}, targetMs);
setTimeout, setInterval и дрейф таймера — иллюстрация 4

Синхронизированное планирование

Синхронизируйте запуск с изменяющимся временем expected: вычисляйте следующую задержку относительно него, чтобы ошибка не накапливалась.

// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;

function tick() {
  ticks = ticks + 1;
  const now = Date.now();
  const drift = now - expected; // positive if we are late
  console.log("drift:", drift, "ms");

  // Compute next expected time first
  expected = expected + step;

  // Next delay = time until the next expected timestamp
  const nextDelay = Math.max(0, expected - Date.now());

  if (ticks < 3) {
    setTimeout(tick, nextDelay);
  } else {
    console.log("aligned stop");
  }
}

setTimeout(tick, step);
setTimeout, setInterval и дрейф таймера — иллюстрация 5

Советы и контрольный список

Советы:

  • Всегда вызывайте clearInterval после завершения.
  • Для стабильного ритма предпочитайте циклы setTimeout с синхронизацией.
  • Делайте обратные вызовы таймеров короткими, чтобы уменьшить смещение.
setTimeout, setInterval и дрейф таймера — иллюстрация 6

Тест по исправлению смещения

Быстрая проверка: уменьшение смещения.

setTimeout, setInterval и дрейф таймера — иллюстрация 7

Итоги

Итоги: Используйте setTimeout для однократных запусков, setInterval для повторений (не забывайте его очищать) и уменьшайте смещение, синхронизируя следующие запуски с ожидаемым временем.

setTimeout, setInterval и дрейф таймера — иллюстрация 8

Часто задаваемые вопросы

Урок «setTimeout, setInterval и дрейф таймера» бесплатный?

Да — полный текст урока «setTimeout, setInterval и дрейф таймера» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «setTimeout, setInterval и дрейф таймера»?

Планируйте разовые и повторяющиеся задачи с помощью setTimeout и setInterval и изучите простой способ уменьшить дрейф таймера Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «setTimeout, setInterval и дрейф таймера»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. setTimeout, setInterval и дрейф таймера
  2. Debounce и throttle — реализация вручную
  3. Синхронизация анимации — введение в циклы по времени
← Назад к JavaScript Academy