IntersectionObserver 無限捲動重複請求？先鎖定載入與分頁狀態

1
function createPageLoader(fetchPage, appendItems) {
2
  let cursor = null;
3
  let inFlight = false;
4
  let hasMore = true;
5
  let disposed = false;
6
  const controller = new AbortController();
7

8
  return {
9
    async loadMore() {
10
      if (inFlight || !hasMore || disposed) return false;
11
      inFlight = true; // 必須在第一個 await 之前鎖定。
12
      try {
13
        const page = await fetchPage(cursor, controller.signal);
14
        if (disposed) return false;
15
        if (!page || !Array.isArray(page.items) ||
16
            !(page.nextCursor === null ||
17
              (typeof page.nextCursor === 'string' && page.nextCursor.length > 0))) {
18
          throw new TypeError('分頁回應格式錯誤');
19
        }
20
        if (page.nextCursor !== null && page.nextCursor === cursor) {
21
          throw new Error('cursor 沒有前進');
22
        }
23
        appendItems(page.items);
24
        cursor = page.nextCursor;
25
        hasMore = cursor !== null;
26
        return true;
27
      } finally {
28
        inFlight = false;
29
      }
30
    },
31
    dispose() {
32
      disposed = true;
33
      controller.abort();
34
    },
35
  };
36
}

1
let stopped = false;
2
let observer;
3
async function requestMore() {
4
  try {
5
    const loaded = await loader.loadMore();
6
    if (!stopped && loaded) status.textContent = '已載入';
7
  } catch (error) {
8
    if (stopped) return;
9
    observer?.unobserve(sentinel);
10
    status.textContent = '載入失敗，請按「載入更多」重試';
11
  }
12
}
13
moreButton.addEventListener('click', requestMore);
14
if ('IntersectionObserver' in window) {
15
  observer = new IntersectionObserver((entries) => {
16
    if (entries.some((entry) => entry.target === sentinel && entry.isIntersecting)) {
17
      void requestMore();
18
    }
19
  }, { rootMargin: '0px 0px 200px 0px' });
20
  observer.observe(sentinel);
21
}
22

23
function cleanup() {
24
  stopped = true;
25
  observer?.disconnect();
26
  moreButton.removeEventListener('click', requestMore);
27
  loader.dispose();
28
}