JavaScript Academy · Урок

Debounce и throttle — реализация вручную

Создайте небольшие утилиты debounce и throttle. Попрактикуйтесь с вариантами по завершении и в начале вызовов и узнайте, когда выбирать каждый из них

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

Обзор

Цель: управлять частыми событиями.

Устранение дребезга: дождаться паузы, затем выполнить один раз
Ограничение частоты: выполнять не чаще одного раза за интервал
Начальные и конечные вызовы
Небольшие понятные вспомогательные функции

Debounce и throttle — реализация вручную — иллюстрация 1

Устранение дребезга (конечный вызов)

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

// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
  let t = null;
  return function (...args) {
    clearTimeout(t);
    t = setTimeout(function () {
      fn.apply(null, args);
    }, wait);
  };
}

// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
  console.log("debounced:", msg);
}, 10);

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    debouncedLog("final after bursts");
  }, i * 3);
}

Debounce и throttle — реализация вручную — иллюстрация 2

Устранение дребезга (начальный вызов)

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

// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
  let t = null;
  return function (...args) {
    if (t === null) {
      fn.apply(null, args);
    }
    clearTimeout(t);
    t = setTimeout(function () {
      t = null;
    }, wait);
  };
}

// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
  console.log("leading:", x);
}, 12);

for (let i = 0; i < 4; i++) {
  setTimeout(function () {
    firstTap("first-then-wait");
  }, i * 3);
}

Debounce и throttle — реализация вручную — иллюстрация 3

Ограничение частоты (начальный вызов)

Ограничение частоты ограничивает вызовы одним за временной интервал, отбрасывая лишние.

// Throttle (leading): at most once per interval
function throttle(fn, wait) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) {
      last = now;
      fn.apply(null, args);
    }
  };
}

// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
  console.log("throttled:", n);
}, 10);

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    throttled(i);
  }, i * 2);
}

Debounce и throttle — реализация вручную — иллюстрация 4

Ограничение частоты (конечный вызов)

Ограничение частоты с конечным вызовом гарантирует, что в конце интервала Вы всё равно получите последнее значение.

// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
  let last = 0;
  let timer = null;
  let queuedArgs = null;

  function invoke(args) {
    last = Date.now();
    fn.apply(null, args);
  }

  return function (...args) {
    const now = Date.now();
    const remaining = wait - (now - last);

    if (remaining <= 0) {
      // Window passed: run now
      clearTimeout(timer);
      timer = null;
      queuedArgs = null;
      invoke(args);
    } else {
      // Queue the latest args to run at the end of the window
      queuedArgs = args;
      clearTimeout(timer);
      timer = setTimeout(function () {
        timer = null;
        if (queuedArgs) {
          invoke(queuedArgs);
          queuedArgs = null;
        }
      }, remaining);
    }
  };
}

// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
  console.log("trail:", x);
}, 10);

for (let i = 0; i < 6; i++) {
  setTimeout(function () {
    trail("v" + i);
  }, i * 3);
}

Debounce и throttle — реализация вручную — иллюстрация 5

Когда что использовать

Выбор:

Устранение дребезга: поиск по мере ввода, изменение размера — выполнять after остановки пользователя.
Ограничение частоты: прокрутка и перетаскивание — ограничивать вызовы стабильным темпом.
Начальный вызов — для мгновенной реакции; конечный — для получения последнего значения.

Debounce и throttle — реализация вручную — иллюстрация 6

Тест по устранению дребезга и ограничению частоты

Быстрая проверка: ограничение числа вызовов за интервал.

Debounce и throttle — реализация вручную — иллюстрация 7

Итоги

Итоги: Вы написали устранение дребезга с конечным и начальным вызовом, простое ограничение частоты с начальным вызовом и лёгкое ограничение частоты с конечным вызовом. Выбирайте устранение дребезга для сценария «после остановки пользователя», а ограничение частоты — для «стабильного темпа».

Debounce и throttle — реализация вручную — иллюстрация 8

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

Урок «Debounce и throttle — реализация вручную» бесплатный?

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

Чему я научусь в уроке «Debounce и throttle — реализация вручную»?

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

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

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

Сколько времени занимает урок «Debounce и throttle — реализация вручную»?

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

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

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

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

setTimeout, setInterval и дрейф таймера
Debounce и throttle — реализация вручную
Синхронизация анимации — введение в циклы по времени

← Назад к JavaScript Academy