diff --git a/src/libs/utils.js b/src/libs/utils.js index 0cce146..c0fb589 100644 --- a/src/libs/utils.js +++ b/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); + }; +}; diff --git a/src/views/Action/Draggable.js b/src/views/Action/Draggable.js index 7fc955f..e968c2a 100644 --- a/src/views/Action/Draggable.js +++ b/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) { diff --git a/src/views/Action/index.js b/src/views/Action/index.js index bfa7c49..02f7594 100644 --- a/src/views/Action/index.js +++ b/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); }; }, []);