— Это часть серии Концепции и методы JavaScript.
События DOM — это действия, которые обычно запускаются, когда пользователи взаимодействуют с DOM в браузере. В соответствии с этими событиями у нас есть обработчики событий, которые позаботятся о той функциональности, которую мы хотим достичь. Обработчики событий будут выполнять код для обработки простых и очень сложных операций.
В определенных сценариях пользователям приходится выполнять некоторые действия, которые так часто вызывают события в браузере. например — прокрутка страницы, ввод текста в текстовое поле, изменение размера окна браузера и т. д.. Если такие постоянно инициируемые события, в свою очередь, предназначены для выполнения какой-то сложной логики за сценой с помощью прикрепленных обработчиков событий, то производительность сайта/приложения пойдет на спад.
Чтобы справиться с такими сценариями, у нас есть такие методы, как Debounce & Throttle. Хотя цель обоих этих методов почти одинакова, а именно — they can limit the rate at which a function gets invoked , между ними есть небольшая разница, которую мы собираемся рассмотреть здесь.
ОТКАЗ
По сути, Debounce — это метод, при котором независимо от того, сколько раз событие запускается, прикрепленный обработчик события будет вызываться только по истечении указанного времени после прекращения запуска события.
Типичная Debounce – это функция более высокого порядка, которая возвращает другую функцию. В основном это делается для создания закрытия для аргументов, передаваемых функции Debounce, чтобы сохранить значения.
давайте посмотрим, как мы можем создать функцию Debounce, которая позаботится о дорогостоящих событиях.
Выше приведена типичная функция Debounce, которая принимает функцию - func и временную метку -wait. По сути, она будет вызывать func по истечении указанного времени wait, как только событие перестанет запускаться.
Существует поле ввода с идентификатором #txtBox, где функция Debounce используется для события keypress. Debounce принимает function, который просто выполняет console.log(‘Debounce happen…’) и задержку 2s (2000). Теперь, пока пользователь постоянно вводит данные в текстовое поле без задержки, превышающей или равной 2s , функция func не будет вызываться. Но, если произойдет задержка 2s, будет выполнена функция func.
Если вы видите код, он отменяет переменную timeout до того, как мы назначим timeout = setTimeout(function(){}, delay). Это означает, что когда вы постоянно запускаете событие без задержки, оно отменяет ранее установленное timeout и, следовательно, функция func не будет выполняться.
ДРОССЕЛЬ
Дросселирование – это также метод ограничения скорости вызова функции. Но это немного отличается от метода Debounce.
Это метод, при котором независимо от того, сколько раз событие запускается, прикрепленный обработчик события будет вызываться только один раз за заданный интервал времени.
Вот реализация технологии дросселирования в Vanilla Javascript.
В приведенном выше фрагменте кода Throttle принимает обратный вызов или функцию исполнителя func и задержку wait . Во внутренней функции или замыкании он вызывает func немедленно, а также устанавливает логическое значение isThrottling в true, что предотвращает выполнение func в ближайших последующих вызовах, если логическоеisThrottling снова не установлено в false в setTimeout.
В обоих вышеупомянутых методах мы использовали замыкание для сохранения контекста (this) и аргументов.
Эти методы используются в таких сценариях, как автозаполнение, событие изменения размера браузера/окна, событие перетаскивания, событие прокрутки и т. д.
