Add debounce
This commit is contained in:
parent
2683ed535d
commit
d90f9db6bb
|
@ -208,6 +208,7 @@ const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
|||
const Burger = ({ open, setOpen }: MobileProps) => {
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
const debouncedPrevScrollPos = useDebounce<number>(prevScrollPos, 100);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
|
@ -216,8 +217,8 @@ const Burger = ({ open, setOpen }: MobileProps) => {
|
|||
|
||||
// set state based on location info (explained in more detail below)
|
||||
setVisible(
|
||||
(prevScrollPos > currentScrollPos &&
|
||||
prevScrollPos - currentScrollPos > 70) ||
|
||||
(debouncedPrevScrollPos > currentScrollPos &&
|
||||
debouncedPrevScrollPos - currentScrollPos > 70) ||
|
||||
currentScrollPos < 10
|
||||
);
|
||||
|
||||
|
@ -227,7 +228,7 @@ const Burger = ({ open, setOpen }: MobileProps) => {
|
|||
window.addEventListener("scroll", handleScroll);
|
||||
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, [prevScrollPos, visible]);
|
||||
}, [debouncedPrevScrollPos, visible]);
|
||||
|
||||
const line1 = open ? styles.burgerLineOpen1 : styles.burgerLineClosed1;
|
||||
const line2 = open ? styles.burgerLineOpen2 : styles.burgerLineClosed2;
|
||||
|
@ -288,3 +289,17 @@ function useOutsideAlerter(
|
|||
};
|
||||
}, [ref, setOpen]);
|
||||
}
|
||||
|
||||
function useDebounce<T>(value: T, delay?: number): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue