Мы уже там (Шрек 2)
Если вы смотрели фильм (Шрек 2), вы, вероятно, знакомы с той частью, где осел раздражает Шрека, спрашивая: «Мы уже здесь?» много раз. Что ж… иногда ваша функция может раздражать не меньше, чем осел, но, к счастью, у нас есть решение.
Проблема
Представьте, что после запроса API у вас есть массив из 500 000 пользовательских объектов.
Теперь вы хотите реализовать функцию поиска, которая может искать пользователей в массиве по имени, телефону, электронной почте и некоторым другим параметрам. у вас будет какая-то тяжелая функция, которая будет работать со всем массивом и возвращать вам новый отфильтрованный массив с отфильтрованными пользователями для отображения на экране.
В результате мы получаем плохую производительность, потому что любое нажатие клавиши пользователем вызовет тяжелую функцию и замедлит его браузер. (Поиск Johny заставляет нас запускать функцию 10 раз)
Решение — отказ
Debounce — это функция, которая принимает другую функцию в качестве параметра, оборачивает эту функцию в замыкание и возвращает новую функцию для реализации поведения «подождать немного», поэтому функция срабатывает через определенный период времени и может быть отменена или возобновлена. .
Разбивка функций
Функция useDebounce принимает 2 параметра.
func: универсальная функция, которая принимает любые аргументы и может возвращать любой тип.
waitFor: количество миллисекунд ожидания до выполнения функции (func)
Функция setTimeout — это встроенная функция, которая «работает в фоновом режиме» и ожидает заданное время до выполнения. Она возвращает число, поэтому мы можем использовать функцию clearTimeout, которая убьет эту задачу перед выполнением. Затем мы возвращаем новую обернутую debounce-функцию. так что в основном то, что мы делаем здесь, вызывает функцию debounce, и с каждым вызовом мы останавливаем предыдущий тайм-аут и создаем новый.
Теперь мы можем использовать функцию useDebounce в нашем проекте:
Краткое содержание
Debounce — отличный способ повысить производительность вашего проекта, особенно если в нем задействован бэкэнд. Теперь, обладая этими знаниями, вы можете с легкостью внедрить функцию устранения дребезга в любом месте!
Надеюсь, вам понравилась статья. Следите за обновлениями :)
