debug

src/pages/Backlog/Backlog.jsx

@@ -5,6 +5,7 @@ import TopSearch from '../../components/TopSearch';
 import axiosRequest from '../../utils/request';
 import Document from 'react-document-title'
 import Empty from '../Empty'
+import useDebounce from '../../useHooks/useDebounce'
 
 const Backlog = (props) => {
     const [current, setCurrent] = useState(0);
@@ -27,15 +28,15 @@ const Backlog = (props) => {
         }).then(res => {
             setLoading(false);
             let result = end && res.rows ? data.concat(res.rows) : data;
-            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('已经到达底部', 1);
+            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('当前是最后一页', 1);
             setEnd(res.rows && res.rows.length >= 10)
             setData(result);
         });
     };
 
     //下拉加载
-    const [end, setEnd] = useState(true)
-    const handleScroll = () => {
+    const [end, setEnd] = useState(true);
+    const handleScroll = useDebounce(() => {
         const event = document.getElementById("common-content")
         const top = event.scrollTop;
         const scrollHeight = event.scrollHeight;
@@ -43,7 +44,7 @@ const Backlog = (props) => {
         if (top + clientHeight === scrollHeight) {
             getData()
         }
-    };
+    }, 500)
     useEffect(() => {
         window.addEventListener('scroll', handleScroll, true);
         return () =>  window.removeEventListener('scroll', handleScroll, true);
@@ -61,7 +62,9 @@ const Backlog = (props) => {
     };
     useEffect(() => {
         getData()
-    }, [searchWord])
+    }, [searchWord]);
+
+    console.log(current)
     return (
         <Document title="待办">
             <WingBlank>

src/pages/Notice/Notice.jsx

@@ -5,6 +5,7 @@ import TopNotice from '../../components/NoticeTab'
 import axiosRequest from '../../utils/request';
 import Document from 'react-document-title'
 import Empty from '../Empty'
+import useDebounce from '../../useHooks/useDebounce'
 
 const Notice = (props) => {
     const [loading, setLoading] = useState(false);
@@ -22,7 +23,7 @@ const Notice = (props) => {
         }).then(res => {
             setLoading(false);
             let result = end && res.rows ? data.concat(res.rows) : data;
-            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('已经到达底部', 1);
+            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('当前是最后一页', 1);
             setEnd(res.rows && res.rows.length >= 10)
             setData(result);
         });
@@ -30,7 +31,7 @@ const Notice = (props) => {
 
     //下拉加载
     const [end, setEnd] = useState(true)
-    const handleScroll = () => {
+    const handleScroll = useDebounce(() => {
         const event = document.getElementById("common-content")
         const top = event.scrollTop;
         const scrollHeight = event.scrollHeight;
@@ -38,7 +39,7 @@ const Notice = (props) => {
         if (top + clientHeight === scrollHeight) {
             getData()
         }
-    };
+    }, 500)
     useEffect(() => {
         window.addEventListener('scroll', handleScroll, true);
         return () =>  window.removeEventListener('scroll', handleScroll, true);

src/pages/Work/WorkDetail.jsx

@@ -5,6 +5,7 @@ import TopNotice from '../../components/NoticeTab'
 import axiosRequest from '../../utils/request';
 import './index.less'
 import Empty from '../Empty'
+import useDebounce from '../../useHooks/useDebounce'
 
 const WorkDetail = (props) => {
     const [loading, setLoading] = useState(false);
@@ -22,7 +23,7 @@ const WorkDetail = (props) => {
         }).then(res => {
             setLoading(false);
             let result = end && res.rows ? data.concat(res.rows) : data;
-            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('已经到达底部', 1);
+            res.rows && res.rows.length >= 10 ? setCurrent(current + 1) : Toast.info('当前是最后一页', 1);
             setEnd(res.rows && res.rows.length >= 10)
             setData(result);
         });
@@ -30,15 +31,15 @@ const WorkDetail = (props) => {
 
     //下拉加载
     const [end, setEnd] = useState(true)
-    const handleScroll = () => {
-        const event = document.getElementById("work-content")
+    const handleScroll = useDebounce(() => {
+        const event = document.getElementById("common-content")
         const top = event.scrollTop;
         const scrollHeight = event.scrollHeight;
         const clientHeight = event.clientHeight;
         if (top + clientHeight === scrollHeight) {
             getData()
         }
-    };
+    }, 500)
     useEffect(() => {
         window.addEventListener('scroll', handleScroll, true);
         return () =>  window.removeEventListener('scroll', handleScroll, true);

src/useHooks/useDebounce.js

+import {useRef, useCallback, useEffect} from 'react';
+
+const UseDebounce = (fn, delay, dep = []) => {
+    const {current} = useRef({fn, timer: null});
+    useEffect(() => {
+        current.fn = fn
+    }, [fn])
+    return useCallback((...args) => {
+        if (current.timer) {
+            clearTimeout(current.timer)
+        }
+        current.timer = setTimeout(() => {
+            current.fn.call(this, ...args)
+        }, delay)
+    })
+};
+
+export default UseDebounce;

src/useHooks/useThrottle.js

+import {useRef, useCallback, useEffect} from 'react';
+
+const UseThrottle = (fn, delay, dep = []) => {
+    const {current} = useRef({fn, timer: null});
+    useEffect(() => {
+        current.fn = fn
+    }, [fn])
+    return useCallback((...args) => {
+        if (!current.timer) {
+           current.timer = setTimeout(() => {
+               delete current.timer
+           }, delay);
+           current.fn.call(this, ...args)
+        }
+    }, dep)
+};
+
+export default UseThrottle;