Sobes.tech
Назад к вопросам
Middle
6

let i = 0; function increment() { i++; console.log(i) } function debounce(func, wait = 0) {} const debouncedIncrement = debounce(increment, 100); debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 1 setTimeout(debouncedIncrement, 150); // i = 2 setTimeout(debouncedIncrement, 200); // i = 2 setTimeout(debouncedIncrement, 350); // i = 3

Компании, где спрашивали
IGaming

Ответ от нейросети

sobes.tech AI

Функция debounce нужна для того, чтобы ограничить частоту вызова переданной функции func. В данном случае, debouncedIncrement должна вызывать increment не чаще, чем раз в 100 мс, и при множественных вызовах подряд — выполнить increment только один раз после того, как вызовы прекратятся на 100 мс.

Реализация debounce может выглядеть так:

function debounce(func, wait = 0) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

Объяснение:

  • При каждом вызове возвращённой функции очищается предыдущий таймаут.
  • Новый таймаут запускается на wait миллисекунд.
  • Если вызовы идут подряд быстрее, чем wait, функция func не вызывается.
  • Как только вызовы прекращаются на wait мс, вызывается func один раз.

В твоём примере:

  • Первые несколько вызовов debouncedIncrement() идут подряд и не вызывают increment сразу.
  • После паузы в 100 мс вызывается increment и увеличивает i.
  • Таймауты с задержкой 150, 200 и 350 мс демонстрируют, что вызовы, близкие по времени, объединяются, а вызовы с задержкой вызывают increment отдельно.

Это классическая реализация debounce для контроля частоты вызовов функций, например, при обработке событий ввода или прокрутки.