Если вы используете обработчик событий, такой как onClick, onChange или onScroll, и хотите предотвратить слишком быстрый запуск обратного вызова, вы можете ограничить скорость, с которой выполняется обратный вызов. Это может быть достигнуто следующими возможными способами.
Дросселирование
Изменения, основанные на частоте, основанной на времени. Например, его можно использовать с помощью функции lodash _.throttle.
_.throttle(func, wait, options)
Метод Lodash _.throttle() создает регулируемую функцию, которая может вызывать параметр функции только один раз в миллисекунду. Метод ожидает как минимум два аргумента: функцию и время регулирования.
устранение дребезга
Когда функция передается функции устранения дребезга Lodash, она задерживает выполнение функции. Это может быть полезно, например, когда мы хотим реализовать поиск, набрав ввод. Вместо того, чтобы вызывать запрос API поиска для каждого введенного символа, мы должны вызывать его только после того, как пользователь перестал печатать.
export default function App() {
const [results, setResults] = React.useState([])
const debouncedSearch = React.useRef(
debounce(async () => {
const response = await fetch(`/api/search?query=${query}`)
const body = await response.json()
const results = body.results.map((result) => result.name)
setResults(results)
}, 300)
).current
async function handleChange(e) {
debouncedSearch(e.target.value)
}
return (
<div>
<input
type="search"
placeholder="Enter your search"
onChange={handleChange}
/>
<ul>
{results.map((result) => (
<li key={result}>{result}</li>
))}
</ul>
</div>
)
}
Использование метода устранения дребезга Lodash в ReactJS лучше сделать, обернув его в функцию useRef, так как это отслеживает функции, для которых отменены дребезги, и предотвращает их создание при каждом рендеринге.
РеквестаниматионФрейм троттлинг
Когда функция используется для рендеринга анимации или вычисления позиций элементов, мы можем использовать RequestAnimationFrame, чтобы предотвратить ее слишком многократный запуск.
const rafId = requestAnimationFrame(callback);
Windows.requestAnimationFrame выполняет ваш обратный вызов каждый раз перед тем, как браузер начнет следующую отрисовку страницы (обычно 60 раз в секунду). Чтобы его остановить, нужно вызвать cancelAnimationFrame и передать id запроса (rafId из примера).
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
