处理滚动事件将经常触发。有什么方法可以减慢/消除它的速度?
如果可能的话,我希望最后一个事件始终被触发而不是被跳过。
const handleScroll = event => {
//how to debounse scroll change?
//if you will just setValue here, it's will lag as hell on scroll
}
useEffect(() => {
window.addEventListener('scroll', handleScroll)
return () => {
window.removeEventListener('scroll', handleScroll)
}
}, [])
这是 useDebounce 钩子示例xnimorz
import { useState, useEffect } from 'react'
export const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(
() => {
const handler = setTimeout(() => {
setDebouncedValue(value)
}, delay)
return () => {
clearTimeout(handler)
}
},
[value, delay]
)
return debouncedValue
}
使用钩子的事件处理程序可以像具有任何去抖实现的任何其他函数一样进行去抖,例如洛达什:
const updateValue = _.debounce(val => {
setState(val);
}, 100);
const handleScroll = event => {
// process event object if needed
updateValue(...);
}
请注意,由于 React 合成事件的工作方式,event
如果在事件处理程序中使用对象,则需要同步处理。
最后一个事件总是被触发并且不会被跳过
预计只有最后一次调用才会被考虑到去抖动函数,除非实现允许更改它,例如leading
and trailing
中的选项Lodash debounce.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)