Этот пост изначально был опубликован в мой блог

Я думаю, что это такие крутые методы, чтобы предотвратить слишком много запусков функции. Между ними есть небольшая разница, и я смутился, прежде чем думать об этом.

Когда я начал думать об этом (это было сегодня, потому что мне нужно было их использовать), мне стало казаться легко понять, что мне нужно использовать.

Во-первых, нам нужно решить, что мы хотим делать.

Если мы хотим сделать ограничение для функции, которая запускается каждый раз, когда происходит событие, мы можем использовать дроссель. Мы можем использовать дроссель, чтобы уменьшить количество вызовов. Давайте представим, что вы запускаете функцию при перемещении мыши. Таким образом, каждый раз функция будет работать. Возможно, вы захотите ограничить его выполнение каждые 2 секунды. Функция будет запускаться только каждые 2 секунды, пока мышь движется. Вы ограничили его и уменьшили количество звонков.

Если мы хотим отложить вызов функции до завершения события, нам нужно использовать отмену дребезга. Для этого есть быстрый пример. Давайте представим, что вы хотите создать окно поиска, которое будет давать пользователю предложения в соответствии с текстом. Будете ли вы делать запрос в своей базе данных, когда пользователь каждый раз нажимает на клавиатуру? Конечно же нет! Потому что это повредит вашей базе данных, верно? Вам нужно отложить выполнение запроса до тех пор, пока пользователь не перестанет печатать. Вы можете сказать, сделайте запрос когда, если пользователь ничего не наберет в течение 500 мс. Это отмена дребезга.

Throttle будет запускаться каждые X раз.

Debounce запускается только один раз после завершения события.

Существует также отличная демонстрация, чтобы полностью продемонстрировать, как они работают.

Вы можете проверить это: Throttle — Debounce Demo