debounce и throttle

В JavaScript при работе с событиями, особенно связанными с пользовательским интерфейсом, часто возникает проблема чрезмерного срабатывания функций. Например, событие scroll или input может вызываться десятки или сотни раз в секунду. Это приводит к излишней нагрузке на приложение, снижает производительность и может вызывать заметные лаги. Для решения таких задач используются debounce и throttle. Quasar предоставляет встроенные инструменты и утилиты для их реализации.

Debounce

Debounce — это техника, при которой функция вызывается только после того, как поток событий прекратился на определённый промежуток времени. Проще говоря, если событие продолжает срабатывать, таймер сбрасывается, и функция не вызывается до тех пор, пока поток не прекратится.

Синтаксис в Quasar:

import { debounce } from 'quasar';

const handleInput = debounce(() => {
  console.log('Ввод обработан');
}, 300);

Ключевые моменты:

  • debounce принимает два аргумента: функцию и задержку в миллисекундах.
  • Задержка определяет, через какой промежуток времени после последнего события функция будет вызвана.
  • Идеально подходит для обработки ввода пользователя, поиска в реальном времени, автокомплита.

Пример использования с компонентом Quasar:

В этом примере функция performSearch вызывается только после того, как пользователь перестал вводить текст на 400 мс. Это предотвращает множественные лишние вызовы API.

Throttle

Throttle — это техника, при которой функция вызывается не чаще одного раза за заданный интервал времени, независимо от того, сколько событий произошло. Если события продолжают срабатывать, функция игнорирует лишние вызовы до следующего интервала.

Синтаксис в Quasar:

import { throttle } from 'quasar';

const handleScroll = throttle(() => {
  console.log('Прокрутка обработана');
}, 200);

Ключевые моменты:

  • throttle также принимает два аргумента: функцию и интервал в миллисекундах.
  • Отлично подходит для событий, которые происходят постоянно, например scroll, resize, mousemove.
  • Позволяет контролировать частоту вызова функции без потери реакции на события.

Пример использования с компонентом Quasar:

В этом примере событие scroll не вызывает функцию чаще одного раза в 100 мс, что снижает нагрузку на рендеринг и повышает отзывчивость интерфейса.

Сравнение debounce и throttle

Характеристика Debounce Throttle
Цель Вызывать функцию после паузы Вызывать функцию с фиксированным интервалом
Типичное использование Поиск, автокомплит, ввод текста Прокрутка, изменение размеров окна, движение мыши
Поведение при множественных событиях Игнорирует все события до окончания паузы Игнорирует события, пока не пройдет интервал
Производительность Позволяет уменьшить частоту вызова после серии событий Ограничивает частоту вызова, но события обрабатываются регулярно

Встроенные возможности Quasar для удобства

Quasar интегрирует debounce и throttle через @quasar/quasar-ui и утилиты, что упрощает их использование без необходимости подключать сторонние библиотеки вроде Lodash.

Дополнительно Quasar позволяет применять эти методы не только к методам в methods, но и к реактивным вычислениям, через watch:

import { debounce } from 'quasar';

watch(
  () => searchQuery,
  debounce((newValue) => {
    fetchResults(newValue);
  }, 300)
);

Таким образом, debounce и throttle становятся универсальными инструментами для оптимизации производительности приложений на Quasar, позволяя контролировать частоту вызовов функций и избегать перегрузки интерфейса.

Оглавление