feat: 优化数据加载逻辑，添加延迟执行以提高触发成功率 #190

Author: keleus

src/contentScripts/views/App.vue

@@ -90,7 +90,7 @@ const handleThrottledPageRefresh = useThrottleFn(() => {
     setTimeout(checkScrollComplete, 100)
   }
 }, 500)
-const handleThrottledReachBottom = useThrottleFn(() => handleReachBottom.value?.(), 500)
+const handleThrottledReachBottom = useThrottleFn(() => handleReachBottom.value?.(), 200)
 const handleThrottledBackToTop = useThrottleFn(() => handleBackToTop(), 500)
 const handleThrottledPageUnRefresh = useThrottleFn(() => handleUndoRefresh.value?.(), 500)
 const handleThrottledPageForwardRefresh = useThrottleFn(() => handleForwardRefresh.value?.(), 500)
@@ -359,6 +359,9 @@ function handleBackToTop(targetScrollTop = 0 as number) {
   iframePageRef.value?.handleBackToTop()
 }
 
+// 添加滚动结束检测
+let scrollEndTimer: ReturnType<typeof setTimeout> | null = null
+
 function handleOsScroll() {
   emitter.emit(OVERLAY_SCROLL_BAR_SCROLL)
 
@@ -373,8 +376,32 @@ function handleOsScroll() {
     reachTop.value = false
   }
 
-  if (clientHeight + scrollTop >= scrollHeight - 300)
+  // 优化滚动检测：降低阈值，提高敏感度
+  const threshold = Math.min(200, clientHeight * 0.2) // 动态阈值，最大200px或20%屏幕高度
+  if (clientHeight + scrollTop >= scrollHeight - threshold) {
     handleThrottledReachBottom()
+  }
+
+  // 清除之前的滚动结束定时器
+  if (scrollEndTimer) {
+    clearTimeout(scrollEndTimer)
+  }
+
+  // 设置滚动结束检测，在滚动停止150ms后再检查一次
+  scrollEndTimer = setTimeout(() => {
+    const osInstance = scrollbarRef.value?.osInstance()
+    if (!osInstance)
+      return
+
+    const { viewport } = osInstance.elements()
+    const { scrollTop, scrollHeight, clientHeight } = viewport
+    const threshold = Math.min(200, clientHeight * 0.2)
+
+    // 滚动结束后的最终检测，使用更大的阈值确保不遗漏
+    if (clientHeight + scrollTop >= scrollHeight - threshold * 1.5) {
+      handleReachBottom.value?.()
+    }
+  }, 150)
 
   if (isHomePage())
     topBarRef.value?.handleScroll()

src/contentScripts/views/Favorites/Favorites.vue

@@ -78,13 +78,18 @@ function initPageAction() {
     if (noMoreContent.value)
       return
 
-    if (searchScope.value === 'all') {
-      const firstCategoryId = favoriteCategories.length > 0 ? favoriteCategories[0].id : 0
-      await getFavoriteResources(firstCategoryId, ++currentPageNum.value, keyword.value, 1)
-    }
-    else {
-      await getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value, 0)
-    }
+    // 优化：添加延迟执行提高触发成功率
+    setTimeout(() => {
+      if (!isLoading.value && !noMoreContent.value) {
+        if (searchScope.value === 'all') {
+          const firstCategoryId = favoriteCategories.length > 0 ? favoriteCategories[0].id : 0
+          getFavoriteResources(firstCategoryId, ++currentPageNum.value, keyword.value, 1)
+        }
+        else {
+          getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value, 0)
+        }
+      }
+    }, 50)
   }
 
   handlePageRefresh.value = () => {

src/contentScripts/views/History/History.vue

@@ -40,10 +40,15 @@ function initPageAction() {
     if (noMoreContent.value)
       return
 
-    if (keyword.value)
-      searchHistoryList()
-    else
-      getHistoryList()
+    // 优化：添加延迟执行提高触发成功率
+    setTimeout(() => {
+      if (!isLoading.value && !noMoreContent.value) {
+        if (keyword.value)
+          searchHistoryList()
+        else
+          getHistoryList()
+      }
+    }, 50)
   }
 
   handlePageRefresh.value = () => {

src/contentScripts/views/Home/components/Following.vue

@@ -105,7 +105,12 @@ function initPageAction() {
     if (noMoreContent.value)
       return
 
-    getData()
+    // 优化：添加延迟执行而不是直接阻止
+    setTimeout(() => {
+      if (!isLoading.value && !noMoreContent.value) {
+        getData()
+      }
+    }, 50) // 短暂延迟确保滚动结束
   }
   handlePageRefresh.value = async () => {
     if (isLoading.value)

src/contentScripts/views/Home/components/ForYou.vue

@@ -132,7 +132,7 @@ const hasBackState = ref<boolean>(false)
 const hasForwardState = ref<boolean>(false)
 
 // 添加请求限制相关的变量
-const requestThrottleTime = 300 // 请求间隔时间(毫秒)
+const requestThrottleTime = 150 // 请求间隔时间(毫秒) - 从300ms减少到150ms
 const lastRequestTime = ref<number>(0)
 const PAGE_SIZE = 30
 
@@ -270,9 +270,17 @@ function initPageAction() {
     if (isFilterBlocked.value)
       return
 
-    // 检查频率限制
+    // 优化频率限制：允许滚动结束后的立即检查
     const now = Date.now()
-    if (now - lastRequestTime.value < requestThrottleTime) {
+    const timeSinceLastRequest = now - lastRequestTime.value
+    if (timeSinceLastRequest < requestThrottleTime) {
+      // 如果距离上次请求时间很短，延迟执行而不是直接返回
+      const remainingTime = requestThrottleTime - timeSinceLastRequest
+      setTimeout(() => {
+        if (!isLoading.value && !noMoreContent.value && !isFilterBlocked.value) {
+          getData()
+        }
+      }, remainingTime)
       return
     }
 

src/contentScripts/views/WatchLater/WatchLater.vue

@@ -49,7 +49,16 @@ function initPageAction() {
   }
 
   handleReachBottom.value = async () => {
-    getData()
+    if (isLoading.value || noMoreContent.value) {
+      return
+    }
+
+    // 优化：添加延迟执行提高触发成功率
+    setTimeout(() => {
+      if (!isLoading.value && !noMoreContent.value) {
+        getData()
+      }
+    }, 50)
   }
 }