From 6fb8a679e483f030e515aeb81e9ccfb0b09cc6d3 Mon Sep 17 00:00:00 2001
From: zhanglun <zhanglun1410@gmail.com>
Date: Thu, 14 Sep 2023 16:16:04 +0800
Subject: [PATCH] fix: add throttle

---
 src/components/ArticleList/hooks.tsx | 48 +++++++++++++++++++++-------
 src/components/ArticleView/index.tsx | 13 ++++++--
 src/containers/Article/Layout1.tsx   |  2 +-
 3 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/components/ArticleList/hooks.tsx b/src/components/ArticleList/hooks.tsx
index d674ed5ea..ff31bf34f 100644
--- a/src/components/ArticleList/hooks.tsx
+++ b/src/components/ArticleList/hooks.tsx
@@ -1,9 +1,28 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useMatch } from "react-router-dom";
 import { useBearStore } from "@/stores";
 import { useShortcut } from "@/hooks/useShortcut";
 import { RouteConfig } from "@/config";
-import { busChannel } from "@/helpers/busChannel";
+
+function throttle(fn: any, wait: number) {
+  let previous = 0;
+  let timer: ReturnType<typeof setTimeout>;
+
+  return function (...args: any) {
+    if (Date.now() - previous > wait) {
+      clearTimeout(timer);
+
+      previous = Date.now();
+
+      fn(...args);
+    } else if (!timer) {
+      // 设置下一个定时器
+      timer = setTimeout(() => {
+        fn(...args);
+      }, wait);
+    }
+  };
+}
 
 export const useArticleListHook = (props: { feedUuid: string | null }) => {
   const { feedUuid } = props;
@@ -53,7 +72,7 @@ export const useArticleListHook = (props: { feedUuid: string | null }) => {
     setLoading(true);
 
     fn.then((res: any) => {
-      console.log('res ===> ', feedUuid, res);
+      console.log("res ===> ", feedUuid, res);
 
       if (res.length === 0) {
         setHasMore(false);
@@ -79,7 +98,7 @@ export const useArticleListHook = (props: { feedUuid: string | null }) => {
   }, [feedUuid, store.currentFilter, isToday, isAll]);
 
   useEffect(() => {
-    console.log('store.cursor', store.cursor);
+    console.log("store.cursor", store.cursor);
     getList();
   }, [store.cursor]);
 
@@ -95,13 +114,18 @@ export const useArticleListHook = (props: { feedUuid: string | null }) => {
 
     const callback = (
       entries: IntersectionObserverEntry[],
-      observer: IntersectionObserver,
+      observer: IntersectionObserver
     ) => {
       entries.forEach((entry) => {
-        if (entry.isIntersecting && !loading && hasMore && store.articleList.length) {
-          console.log('interaction update cursor ====>')
+        if (
+          entry.isIntersecting &&
+          !loading &&
+          hasMore &&
+          store.articleList.length
+        ) {
+          console.log("interaction update cursor ====>");
           store.setCursor(store.cursor + 1);
-        } else if(entry.isIntersecting && store.articleList.length === 0) {
+        } else if (entry.isIntersecting && store.articleList.length === 0) {
           store.setCursor(1);
         }
       });
@@ -118,15 +142,15 @@ export const useArticleListHook = (props: { feedUuid: string | null }) => {
     };
   }, [loading, store.articleList]);
 
-  function goPrev() {
+  const goPrev = useCallback(throttle(() => {
     console.warn("goPrev");
     store.goPreviousArticle();
-  }
+  }, 300), []);
 
-  function goNext() {
+  const goNext = useCallback(throttle(() => {
     console.warn("goNext");
     store.goNextArticle();
-  }
+  }, 300), []);
 
   useEffect(() => {
     registerShortcut(["n"], goNext);
diff --git a/src/components/ArticleView/index.tsx b/src/components/ArticleView/index.tsx
index ebb809711..d80e2f528 100644
--- a/src/components/ArticleView/index.tsx
+++ b/src/components/ArticleView/index.tsx
@@ -4,15 +4,14 @@ import { useBearStore } from "@/stores";
 import { ArticleDetail } from "@/components/ArticleView/Detail";
 
 type ArticleViewProps = {
-  article: any | null;
   userConfig: UserConfig;
 };
 
 export const ArticleView = (props: ArticleViewProps): JSX.Element => {
   const store = useBearStore((state) => ({
     feed: state.feed,
+    article: state.article,
   }));
-  const { article, userConfig } = props;
   const renderPlaceholder = () => {
     return (
       <div className="py-10 text-xl">
@@ -21,9 +20,17 @@ export const ArticleView = (props: ArticleViewProps): JSX.Element => {
     );
   };
 
+  useEffect(() => {
+    console.log("%c Line:27 🥓 store.article", "color:#6ec1c2", store.article);
+  }, [store.article]);
+
   return (
     <div className=" py-1 px-10 font-[var(--reading-font-body)] min-h-full m-auto sm:px-5 sm:max-w-xl lg:px-10 lg:max-w-5xl">
-      {article ? <ArticleDetail article={article} /> : renderPlaceholder()}
+      {store.article ? (
+        <ArticleDetail article={store.article} />
+      ) : (
+        renderPlaceholder()
+      )}
     </div>
   );
 };
diff --git a/src/containers/Article/Layout1.tsx b/src/containers/Article/Layout1.tsx
index a2ccffeec..a0d112790 100644
--- a/src/containers/Article/Layout1.tsx
+++ b/src/containers/Article/Layout1.tsx
@@ -52,7 +52,7 @@ export const Layout1 = (): JSX.Element => {
         className="h-[calc(100vh_-_var(--app-toolbar-height))]"
         ref={scrollBoxRef}
       >
-        <ArticleView article={store.article} userConfig={store.userConfig} />
+        <ArticleView userConfig={store.userConfig} />
       </ScrollBox>
     </div>
   );