Comments 15
clearTimeout(timeoutId);
timeoutId - не та переменная.
но чтобы не грузить сервер запросами и не повторять рендер страницы с одинаковыми по значению данными, мы хотим обернуть запрос в дебаунсер с некоторым ограничением по времени
Кажется дебаунсер тут не поможет
в контексте отправки запросов при вводе в инпут - поможет )
вы уменьшаете количество отправляемых запросов - таким образом уменьшаете нагрузку на сервер,
а обрабатывая меньшее количество ответов - уменьшаете количество обновлений вашего компонента.
второе в целом не очень существенно прибавляет в производительности, если вы правильно мемоизируете компонент, который вы рендерите. но если представить, что у вас много таких компонентов на странице, я посчитал этот аргумент валидным
о том как дебаунсер увеличивает производительность ui можете посмотреть здесь:
https://css-tricks.com/debouncing-throttling-explained-examples/#aa-debounce
Предположим, при вводе текста в инпут мы хотим отправлять запрос на сервер, чтобы получить выпадающий список вариантов под введенное значение.
для данного применения достаточно просто ограничить первую отправку на сервер 3-4 символами. и реализовать разделение на группы пробелом, тогда на сервере логика выбора будет поле like %1группа% and поле like %2группа% и так далее. как правило редко приходится вбивать более 3-х групп для выборки аз 10 лямов записей - из практики применения. замыкания, конечно хорошо надо знать, но и применять надо по месту.
а зачем это всё, если есть https://react.dev/reference/react/useDeferredValue?
Если использовать не только в React, то вполне полезная функция.
Кстати, функция легко гуглится "function debounce(f, ms)", выдает компактный код и внятное объяснение.
Использую для сохранения последней выбранной записи, когда пользователь бегает по гриду.
Если сохранять каждый раз при переходе на запись - перегруз запросов. А если с задержкой в 2сек поесле последнего перехода - самое то.
useDererredValue() же не позволяет задавать задержку.
А вот так дебонс выглядит в $mol:
@act someAction() {
sleep( 1000 )
// do some work
}Нет, не продаю, просто показываю.
А что из этого debounce? Act? Sleep?
Для лучшего понимания тут бы наверное стоило или в таком виде задавать
@act 1000 someAction() {
// do some work
}или вот в таком
@act someAction() {
debonce( 1000 )
// do some work
}Иначе, ИМХО, стороннему человеку этот код реально кажется непонятным
Любая достаточно развитая технология неотличима от магии. Тут про это рассказывается: https://mol.hyoo.ru/#!section=docs/=97b2fn_qb9le1
Debouncer: практический пример использования замыкания