window resize use debounce

src/libs/utils.js

@@ -35,3 +35,19 @@ export const matchValue = (arr, val) => {
  */
 export const sleep = (delay) =>
   new Promise((resolve) => setTimeout(resolve, delay));
+
+/**
+ * 防抖函数
+ * @param {*} func
+ * @param {*} delay
+ * @returns
+ */
+export const debounce = (func, delay = 200) => {
+  let timer;
+  return (...args) => {
+    timer && clearTimeout(timer);
+    timer = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};

src/views/Action/Draggable.js

@@ -82,21 +82,15 @@ export default function Draggable({
   });
   const [edgeTimer, setEdgeTimer] = useState(null);
 
-  const goEdge = useCallback(() => {
-    console.log("goEdge");
-    setPosition((pre) =>
-      getEdgePosition(pre, windowSize.w, windowSize.h, width, height)
-    );
+  const goEdge = useCallback((w, h, width, height) => {
+    setPosition((pre) => getEdgePosition(pre, w, h, width, height));
 
     setEdgeTimer(
       setTimeout(() => {
-        console.log("goHide");
-        setPosition((pre) =>
-          getHidePosition(pre, windowSize.w, windowSize.h, width, height)
-        );
+        setPosition((pre) => getHidePosition(pre, w, h, width, height));
       }, 2000)
     );
-  }, [windowSize.w, windowSize.h, width, height]);
+  }, []);
 
   const handlePointerDown = (e) => {
     !isMobile && e.target.setPointerCapture(e.pointerId);
@@ -132,7 +126,7 @@ export default function Draggable({
     if (!snapEdge) {
       return;
     }
-    goEdge();
+    goEdge(windowSize.w, windowSize.h, width, height);
   };
 
   const handleClick = (e) => {
@@ -143,7 +137,7 @@ export default function Draggable({
     e.stopPropagation();
     if (snapEdge && position.hide) {
       edgeTimer && clearTimeout(edgeTimer);
-      goEdge();
+      goEdge(windowSize.w, windowSize.h, width, height);
     }
   };
 
@@ -152,8 +146,8 @@ export default function Draggable({
     if (!snapEdge) {
       return;
     }
-    goEdge();
-  }, [snapEdge, goEdge]);
+    goEdge(windowSize.w, windowSize.h, width, height);
+  }, [snapEdge, goEdge, windowSize.w, windowSize.h, width, height]);
 
   const opacity = useMemo(() => {
     if (snapEdge) {

src/views/Action/index.js

@@ -10,6 +10,7 @@ import Stack from "@mui/material/Stack";
 import { useEffect, useState, useMemo, useCallback } from "react";
 import { StoragesProvider } from "../../hooks/Storage";
 import Popup from "../Popup";
+import { debounce } from "../../libs/utils";
 
 export default function Action({ translator }) {
   const fabWidth = 40;
@@ -20,12 +21,16 @@ export default function Action({ translator }) {
   });
   const [moved, setMoved] = useState(false);
 
-  const handleWindowResize = (e) => {
-    setWindowSize({
-      w: document.documentElement.clientWidth,
-      h: document.documentElement.clientHeight,
-    });
-  };
+  const handleWindowResize = useMemo(
+    () =>
+      debounce(() => {
+        setWindowSize({
+          w: document.documentElement.clientWidth,
+          h: document.documentElement.clientHeight,
+        });
+      }),
+    []
+  );
 
   const handleWindowClick = (e) => {
     setShowPopup(false);
@@ -41,10 +46,14 @@ export default function Action({ translator }) {
 
   useEffect(() => {
     window.addEventListener("resize", handleWindowResize);
-    window.addEventListener("click", handleWindowClick);
-
     return () => {
       window.removeEventListener("resize", handleWindowResize);
+    };
+  }, [handleWindowResize]);
+
+  useEffect(() => {
+    window.addEventListener("click", handleWindowClick);
+    return () => {
       window.removeEventListener("click", handleWindowClick);
     };
   }, []);