useEffect 中的去抖/节流 onChange 事件

Question

如何去抖动/限制 scrollY.onChange() 调用的函数？

我猜可以使用 Lodash。

这是我的自定义挂钩，用于检查用户是否向上或向下滚动：

import { useState, useEffect } from "react";
import { useViewportScroll } from "framer-motion";

const scrollScreen = () => {
const { scrollY } = useViewportScroll();

const [hidden, setHidden] = useState(false);

function update() {
 if (scrollY?.current < scrollY?.prev) {
   console.log("SHOW");
   setHidden(false);
   } else if (scrollY?.current > 100 && scrollY?.current > scrollY?.prev) {
   setHidden(true);
 }
}

 useEffect(() => {
return scrollY.onChange(() => update());
 });

return [hidden, setHidden];
  };

export default scrollScreen;

Answer 1

您可以使用 lodash 库来完成：

import _ from 'lodash'
import { useState, useEffect, useCallback } from "react";
import { useViewportScroll } from "framer-motion";

const DEBOUNCE_TIME = 1000;

const scrollScreen = () => {
const { scrollY } = useViewportScroll();

const [hidden, setHidden] = useState(false);

function update() {
 if (scrollY?.current < scrollY?.prev) {
   console.log("SHOW");
   setHidden(false);
   } else if (scrollY?.current > 100 && scrollY?.current > scrollY?.prev) {
   setHidden(true);
 }
}

const handleChange = useCallback(_.debounce(update, DEBOUNCE_TIME), [])

 useEffect(() => {
   return scrollY.onChange(handleChange);
 });

  return [hidden, setHidden];
};

export default scrollScreen;

Answer 2

使用 lodash 的 throttle 创建一个新函数并用 useMemo:

记忆它

import { useState, useEffect, useMemo } from "react";
import { useViewportScroll } from "framer-motion";

import { throttle } from "lodash";

const scrollScreen = () => {
  const { scrollY } = useViewportScroll();

  const [hidden, setHidden] = useState(false);
  
  const update = useMemo(() => throttle(() => {
    if (scrollY?.current < scrollY?.prev) {
      console.log("SHOW");
      setHidden(false);
    } else if (scrollY?.current > 100 && scrollY?.current > scrollY?.prev) {
      setHidden(true);
    }
  }, 100), []);

  useEffect(() => {
    scrollY.onChange(update);
  }, [update]);

  return [hidden, setHidden];
};

export default scrollScreen;

useEffect 中的去抖/节流 onChange 事件

Debounce / Throttle onChange event in useEffect

throttling

lodash

reactjs

debounce

react-hooks