Декораторы функций debouncing и throttling У каждого разраб | Типичный Awento

Декораторы функций debouncing и throttling

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

Вот тут на помощь приходят декораторы функций debouncing и throttling

Для начала - что вообще такое декораторы функций?

Декоратор - это обертка для функции, которая расширит и/или дополнит ее функционал

Зачем вообще декораторы? Они нужны для того, чтобы писать более чистый и понятный код

debouncing
Данный декоратор позволяет выполнить функцию, когда после последнего вызова прошло определенное количество времени ( для того, чтобы было более понятно, смотри фото 2 в каруселе )

Например: Вы реализовали поиск . Добавили событие на keyup. И каждый раз, когда происходит данное событие идет запрос на сервер для получения данных, после чего показывает результат. Можно предположить, что за пару секунд человек введет в поиск десяток символов, а значит будет 10 запросов на сервер . Представьте, если на сайт зайдут тысячи людей и начнут искать, то нагрузка на сервер может быть и ощутимой . Вот тут на помощь приходит debouncing.
Если обернуть событие keyup в debouncing и задать время задержки 500 мс, то колбэк, который выполняется при срабатывании события, выполнится один раз, через 500 мс, после прекращения ввода запроса поиска.

Вот так вместо 5-10 запросов в секунду, можно получить один