React Frontend Developer

Question 1

Что такое debounce?

Accepted Answer

debounce — это техника, при которой функция выполняется только спустя заданное время после последнего вызова. Если за это время функция вызывается снова, таймер сбрасывается. В итоге выполнение происходит один раз, когда события “затихли”. Это помогает уменьшить количество лишних операций.

Question 2

Чем debounce отличается от throttle?

Accepted Answer

debounce выполняет функцию только после паузы в событиях, а throttle — не чаще одного раза за заданный интервал времени. Debounce подходит, когда важен финальный результат, а throttle — когда важна регулярность выполнения. Эти подходы решают похожие задачи, но применяются в разных сценариях. Выбор зависит от поведения, которое ожидается от интерфейса.

Question 3

В каких кейсах используется debounce?

Accepted Answer

Debounce используется, когда события происходят часто, но результат нужен только после того, как пользователь закончил действие. Типичный пример — поиск по вводу текста. Он помогает снизить нагрузку на приложение и сервер. Это делает интерфейс более отзывчивым и предсказуемым.

Question 4

Как debounce может помочь при повторных запросах данных?

Accepted Answer

Debounce позволяет откладывать отправку запроса до тех пор, пока пользователь не закончит ввод или изменение параметров. Это уменьшает количество запросов и снижает вероятность race condition. Вместо множества конкурентных запросов отправляется один — самый актуальный. В React debounce часто используется совместно с useEffect.

Question 5

Как реализовать debounce для поля поиска?

Accepted Answer

Debounce — это техника, которая откладывает выполнение функции до тех пор, пока не пройдет определенное время после последнего вызова. Для поля поиска это означает, что запрос отправляется только после того, как пользователь перестал печатать. Это уменьшает количество запросов к серверу и улучшает производительность.

Question 6

Как передавать аргументы в debounce-функцию?

Accepted Answer

Debounce-функция принимает целевую функцию и задержку. При вызове она возвращает новую функцию, которая собирает аргументы через rest-оператор и передает их в исходную функцию через apply или call после таймаута. Это позволяет сохранить контекст и параметры вызова, например, при обработке ввода в поисковой строке.

Question 7

Для чего используется clearTimeout в debounce?

Accepted Answer

clearTimeout в debounce используется для отмены предыдущего таймера при каждом новом вызове функции. Это гарантирует, что целевая функция выполнится только после того, как пройдет указанная задержка с момента последнего вызова. Без clearTimeout каждый вызов создавал бы новый таймер, и функция выполнялась бы многократно, что противоречит логике debounce.

Question 8

Как сохранить контекст вызова функции внутри debounce?

Accepted Answer

При использовании debounce контекст this теряется, потому что debounce возвращает новую функцию, которая вызывается позже. Чтобы сохранить контекст, нужно использовать метод bind() при создании debounce-функции или передавать контекст через замыкание. Например, можно обернуть вызов в стрелочную функцию или явно привязать this с помощью .call() внутри debounce.

Question 9

Почему при реализации debounce необходимо очищать предыдущий таймер?

Accepted Answer

Debounce откладывает выполнение функции до тех пор, пока не пройдет определенный интервал времени после последнего вызова. Очистка предыдущего таймера необходима, чтобы отменить уже запланированный вызов и запустить новый отсчет. Без этого каждый вызов будет создавать новый таймер, и функция выполнится несколько раз, а не один раз после прекращения активности.

Question 10

В чём преимущество использования готовых утилит debounce/throttle из lodash перед самописными решениями?

Accepted Answer

Готовые утилиты из lodash, такие как debounce и throttle, предоставляют надёжные реализации с учётом множества граничных случаев, которые сложно предусмотреть в самописных решениях. Они оптимизированы для производительности, поддерживают опции вроде leading и trailing, и протестированы в различных сценариях. Использование lodash снижает риск ошибок и ускоряет разработку, особенно в крупных проектах.

Вопросы React Frontend Developer