Сейчас многие пишут о сложных и продвинутых технологиях, а фундаментальные вещи часто остаются за кадром. Мол, "это и так все знают" или "можно прочитать в документации".
Мне кажется что также нужно писать и о простых вещах. Да при желании эту информацию очень легко найти, но как говорится мало ли может кто-нибудь в данный момент искал ответ на этот вопрос)
Поэтому вашему вниманию 🥁🥁🥁
🚀 Debounce vs Throttle: в чём разница?
Представьте: у вас есть поисковая строка, которая отправляет запрос на сервер при каждом вводе. Если делать это на каждый
input — будут лишние запросы и нагрузка. Решение:
debounce и throttle — два способа контролировать частоту вызова функции. Но в чём разница? 1. Debounce
- Как работает: это функция, которая «откладывает» вызов другой функции до того момента, когда с последнего вызова пройдёт определённое количество времени, то есть ждёт, пока действия прекратятся на N миллисекунд, и только потом вызывает функцию.
- Пример: Поиск, который срабатывает только после паузы в вводе (например, 500 мс).
2. Throttle
- Как работает: это функция, которая вызывает другую функцию, «пропуская» некоторые вызовы с определённой периодичностью, то есть позволяет вызывать функцию не чаще, чем раз в N миллисекунд.
- Пример: Обработчик скролла, который срабатывает раз в 100 мс (а не на каждый пиксель).
Главное отличие:
- Debounce — ждёт "тишины".
- Throttle — гарантирует вызов не чаще, чем нужно.
Ниже приведены примеры из доки с реализацией:
https://doka.guide/js/debounce/
https://doka.guide/js/throttle/
