В чем разница между Throttling и Debouncing

«В чем разница между Throttling и Debouncing» — вопрос из категории JavaScript, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Throttling и Debouncing — оба ограничивают частоту вызова функции, но работают по-разному.

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

function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    return func(...args);
  };
}

Debouncing откладывает вызов функции до момента, когда с момента последнего события пройдет указанный интервал. Например, для поиска при вводе:

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func(...args), delay);
  };
}

Разница:

  • Throttling — вызов через равные промежутки
  • Debouncing — вызов только после паузы в событиях