时间戳

首页 > 解决方案 > 在 useEffect 中去抖动/限制 onChange 事件

reactjs - 在 useEffect 中去抖动/限制 onChange 事件

问题描述

如何去抖动/限制由 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;

标签： reactjsreact-hookslodashthrottlingdebounce

解决方案

使用 lodash 的油门创建一个新函数，并使用以下命令对其进行记忆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;

推荐阅读