Что такое Debounce?
Полезные ссылки на Javascript. Подготовка к собеседованию (часть 2)
03.03.2022
Быстрые шпаргалки по REACT
04.03.2022Производительность — это одна из многих вещей, которые являются приоритетными при создании веб-сайтов и программного обеспечения в целом. Как инженеры-программисты, мы обязательно должны писать код с учетом производительности, так как это очень поможет улучшить общее взаимодействие с пользователем нашего программного обеспечения.
В этой статье мы рассмотрим Debounce, очень полезный метод повышения производительности клиентских приложений.
Прежде чем мы рассмотрим, что такое Debounce, давайте кратко рассмотрим event listeners.
Event Listeners
При создании клиентских приложений мы не можем обойтись без них. Каждое клиентское приложение потребует, чтобы пользователь взаимодействовал с ним, чтобы оно (приложение) было полезным, эти взаимодействия могут включать нажатие кнопки, прокрутку для просмотра большего количества контента, ввод в поле ввода, отправку формы и многое другое. Event Listeners имеют обратные вызовы, которые срабатывают всякий раз, когда запускается событие, которое они прослушивают.
В некоторых случаях эти обработчики событий будут иметь обратные вызовы с высокой производительностью, следовательно, нам необходимо контролировать, как и когда вызываются эти обратные вызовы. И здесь в игру вступает Debounce.
Предположим, что у нас есть панель поиска, которая отправляет запрос к API всякий раз, когда пользователь вносит изменения в поле ввода. Это означает, что если пользователь хочет выполнить поиск по термину «Что такое устранение Debounce?», браузер должен будет сделать в общей сложности 19 запросов к API.
Теперь вы можете проверить это.
https://codepen.io/jeremiahjacinth13/embed/VwMOVpK?height=600&default-tab=result&embed-version=2
При таком подходе, наш браузер делает запрос на каждое нажатие клавиши, которое пользователь делает на клавиатуре, что оставляет нам множество бесполезных запросов.
Как насчет того, чтобы найти способ предотвратить выполнение запроса до тех пор, пока пользователь не закончит печатать? Решит ли это проблему? Это именно то, что представляет собой Debounce.
Debounce
Это метод, при котором выполнение функции предотвращается до тех пор, пока не истечет определенное время без вызова функции. В нашем случае запрос не будет выполнен, пока пользователь не перестанет печатать.
При реализации Debounce наш обратный вызов события будет выглядеть примерно так:
|
1 2 3 4 5 6 7 8 9 |
let timeout; // other codes inputField.addEventListener('input', () => { clearTimeout(timeout); timeout = setTimeout(makeRequest, 500); }) |
Из приведенного выше фрагмента всякий раз, когда пользователь вводит текст, мы сбрасываем тайм-аут, которого не существует при первоначальном вызове функции. Затем мы создаем еще один тайм-аут, используя setTimeout, который вызывает makeRequest функцию по истечении времени. Это означает, что если тайм-аут не истек и пользователь вводит, мы очищаем предыдущий таймер и создаем новый. Таким образом, будет работать только последний тайм-аут. Следовательно, решение нашей проблемы с несколькими запросами.
Имеет больше смысла, не так ли?
Вот codepen, если вы хотите внимательно посмотреть на реализацию
https://codepen.io/jeremiahjacinth13/embed/BawevKv?height=600&default-tab=result&embed-version=2
Дополнительно
Вместо того, чтобы вручную писать функцию Debounce каждый раз, когда мы хотим реализовать эту удивительную функциональность, мы можем просто создать служебную функцию, которая принимает обратный вызов и таймер, а затем возвращает функцию, имеющую всю функциональность Debounce.
Что-то вроде этого:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function debounce(func, timeINMS) { let timeout; return function () { clearTimeout(timeout); timeout = setTimeout(func, timeINMS); }; } let debouncedHello = debounce(() => console.log("say hello", Date.now()), 800); |
Здесь debounce функция принимает два аргумента: функцию, которая регистрирует, say helloи число, представляющее время (в миллисекундах), через которое функция должна быть отложена, а затем возвращает функцию, имеющую функцию Debounce.
Debounce — очень простая и интуитивно понятная техника, но она также значительно повышает производительность.
Надеемся, вы сможете реализовать функцию Debounce, чтобы увеличить производительность вашего проекта.
Источник статьи: http://dev.to/
