fix(useInfiniteScroll): improve promise handling and add flush post to watch (#5122)

nhquyss · 9romise · web-flow · commit abcea6428b79 · 2026-01-31T06:03:56.000Z
Co-authored-by: Vida Xie &lt;vida_2020@163.com&gt;
diff --git a/packages/core/useInfiniteScroll/index.ts b/packages/core/useInfiniteScroll/index.ts
@@ -85,7 +85,7 @@ export function useInfiniteScroll<T extends InfiniteScrollElement>(
   function checkAndLoad() {
     state.measure()
 
-    if (!observedElement.value || !isElementVisible.value || !canLoad.value)
+    if (!observedElement.value || !isElementVisible.value || !canLoad.value || promise.value)
       return
 
     const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value as HTMLElement
@@ -94,23 +94,21 @@ export function useInfiniteScroll<T extends InfiniteScrollElement>(
       : scrollWidth <= clientWidth
 
     if (state.arrivedState[direction] || isNarrower) {
-      if (!promise.value) {
-        promise.value = Promise.all([
-          onLoadMore(state),
-          new Promise(resolve => setTimeout(resolve, interval)),
-        ])
-          .finally(() => {
-            promise.value = null
-            nextTick(() => checkAndLoad())
-          })
-      }
+      promise.value = Promise.all([
+        onLoadMore(state),
+        new Promise(resolve => setTimeout(resolve, interval)),
+      ])
+        .finally(() => {
+          promise.value = null
+          nextTick(() => checkAndLoad())
+        })
     }
   }
 
   const stop = watch(
     () => [state.arrivedState[direction], isElementVisible.value, canLoad.value],
     checkAndLoad,
-    { immediate: true },
+    { immediate: true, flush: 'post' },
   )
 
   tryOnUnmounted(stop)
