From 40bf214da7ad382ea1d924d698ba3b7077638115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Wed, 11 Dec 2024 15:42:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8=20radash=20=E7=9A=84?=
 =?UTF-8?q?=20throttle=20=E5=8C=85=E8=A3=85=20load=20=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E5=8A=A0=E8=BD=BD=E9=A2=91=E7=8E=87?=
 =?UTF-8?q?=E5=B9=B6=E9=87=8D=E6=9E=84=20refresh=20=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...UseIntersectionObserverInfiniteLoading.vue | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/UseIntersectionObserverInfiniteLoading.vue b/src/components/UseIntersectionObserverInfiniteLoading.vue
index fa7e01d..7bb000a 100644
--- a/src/components/UseIntersectionObserverInfiniteLoading.vue
+++ b/src/components/UseIntersectionObserverInfiniteLoading.vue
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { throttle } from 'radash';
+
 function checkIsVisible(el: Element, root: Element | null = null) {
   if (!el) return false;
 
@@ -43,19 +45,12 @@ defineSlots<{
   // 加载失败
   error(props: { retry: () => void }): unknown;
 }>();
-defineExpose({
-  refresh: () => {
-    currentPage = 0;
-    state.value = '';
-    return load('refresh');
-  },
-});
 
 const target = ref(null);
 let currentPage = 0;
 const state = ref<'' | 'loading' | 'loaded' | 'complete' | 'error'>('');
 
-const load = async (why?: string) => {
+const loadImpl = async (why?: string) => {
   console.group('load');
   console.debug(`why :>> `, why);
   console.groupEnd();
@@ -81,6 +76,19 @@ const load = async (why?: string) => {
   }
 };
 
+// 使用radash的throttle包装load函数,1秒内最多执行一次
+const load = throttle({ interval: 1000 }, loadImpl);
+
+const refresh = () => {
+  currentPage = 0;
+  state.value = '';
+  return loadImpl('refresh'); // refresh 不需要节流
+};
+
+defineExpose({
+  refresh,
+});
+
 const { pause, resume /*  ,isSupported, isActive */ } = useIntersectionObserver(
   target,
   ([entry]) => {