Что такое дебаунс?
Debounce — это механизм, который задерживает выполнение функции. Другими словами, он выполняет функцию только один раз, когда несколько вызовов функции выполняются через короткие промежутки времени.
Почему Дебунс?
Допустим, у нас есть поле ввода, которое позволяет пользователю вводить символы. Каждый символ, введенный пользователем в поле ввода, будет вызывать API. Выполнение вызова API для каждого символа является дорогостоящей операцией по таким причинам, как пользователь может ввести несколько символов, что приводит к спаму вызовов API, и в большинстве случаев вызовы API связаны с доступом к базе данных. Доступ к БД, который часто является дорогостоящей операцией.
Чтобы решить эту проблему, мы используем концепцию Debounce. В приведенном выше примере вместо вызова API для каждого добавленного символа мы ждем определенное время после добавления каждого символа, и в течение этого времени ожидания, если пользователь не выполнил никаких действий, мы делаем вызов API. Если в случае, если пользователь выполняет какое-либо действие в течение тайм-аута, тайм-аут сбрасывается и начинается снова.
Как написать функцию Debounce в JavaScript?
Эта функция debounce принимает два параметра: один — это время ожидания выполнения функции, а другой параметр — это функция, которую необходимо вызвать.
Логика функции debounce заключается в том, что мы определяем переменную тайм-аута, как только пользователь перестанет добавлять символы в поле ввода, этот тайм-аут будет сброшен и будет ждать, пока не истечет заданный таймер. Если за это время не выполняется никаких действий пользователя, вызывается функция.
Если пользователь добавляет еще один символ в течение времени, переменная тайм-аута снова сбрасывается и ждет до заданного времени. Этот сброс переменной тайм-аута продолжается до тех пор, пока не будет выполнено никаких действий.
В приведенном выше коде функция loggingEg при добавлении с помощью debounceFunc не будет выполняться при каждом щелчке, а будет выполняться только при последнем щелчке, если пользователь не нажимает кнопку кнопку снова через 500 мс.
Спасибо за прочтение. Хорошего дня!!! 🤙
