/**
 * 串行執(zhí)行AJAX請(qǐng)求
 * @param {Array} urls - 請(qǐng)求地址列表（如['/api/user/1', '/api/user/2', ..., '/api/user/100']）
 * @returns {Promise<Array>} 所有請(qǐng)求結(jié)果的數(shù)組（順序與urls一致）
 */
async function serialRequest(urls) {
  const results = []; // 存儲(chǔ)最終結(jié)果
  const maxRetry = 2; // 失敗重試次數(shù)，提升穩(wěn)定性
  
  for (let i = 0; i < urls.length; i++) {
    const url = urls[i];
    let retryCount = 0;
    let success = false;
    
    // 失敗重試邏輯
    while (retryCount <= maxRetry && !success) {
      try {
        const response = await fetch(url, {
          method: 'GET',
          headers: { 'Content-Type': 'application/json' },
          signal: AbortSignal.timeout(5000) // 5秒超時(shí)，避免無(wú)限等待
        });
        
        if (!response.ok) {
          throw new Error(`HTTP錯(cuò)誤，狀態(tài)碼：${response.status}`);
        }
        
        const data = await response.json();
        results.push(data);
        success = true;
        console.log(`第${i+1}個(gè)請(qǐng)求成功，進(jìn)度：${i+1}/${urls.length}`);
      } catch (error) {
        retryCount++;
        if (retryCount > maxRetry) {
          results.push(null); // 標(biāo)記失敗的請(qǐng)求
          console.error(`第${i+1}個(gè)請(qǐng)求失敗（重試${maxRetry}次）：`, error.message);
        } else {
          console.log(`第${i+1}個(gè)請(qǐng)求失敗，正在重試（${retryCount}/${maxRetry}）`);
          await new Promise(resolve => setTimeout(resolve, 1000)); // 重試間隔1秒
        }
      }
    }
  }
  
  return results;
}

// 用法示例
const urlList = Array.from({ length: 100 }, (_, i) => `/api/user/${i+1}`);
serialRequest(urlList).then(allResults => {
  const successCount = allResults.filter(Boolean).length;
  console.log(`所有請(qǐng)求完成，成功${successCount}個(gè)，失敗${100 - successCount}個(gè)`);
  // 后續(xù)處理結(jié)果...
});

/**
 * 帶并發(fā)控制的并行請(qǐng)求
 * @param {Array} urls - 請(qǐng)求地址列表
 * @param {number} limit - 最大并發(fā)數(shù)（推薦3-5，根據(jù)服務(wù)器性能調(diào)整）
 * @returns {Promise<Array>} 所有請(qǐng)求結(jié)果的數(shù)組
 */
async function concurrentRequest(urls, limit = 5) {
  const results = []; // 存儲(chǔ)最終結(jié)果
  const executing = new Set(); // 并發(fā)池：存儲(chǔ)正在執(zhí)行的Promise
  const urlQueue = [...urls]; // 請(qǐng)求隊(duì)列
  
  // 單個(gè)請(qǐng)求的封裝函數(shù)
  const request = async (url, index) => {
    try {
      const response = await fetch(url, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
        signal: AbortSignal.timeout(5000)
      });
      
      if (!response.ok) {
        throw new Error(`HTTP錯(cuò)誤，狀態(tài)碼：${response.status}`);
      }
      
      const data = await response.json();
      results[index] = data; // 按原順序存儲(chǔ)結(jié)果
      console.log(`請(qǐng)求${url}成功`);
    } catch (error) {
      results[index] = null;
      console.error(`請(qǐng)求${url}失敗：`, error.message);
    } finally {
      executing.delete(url); // 請(qǐng)求完成后移出并發(fā)池
      // 隊(duì)列中有剩余請(qǐng)求時(shí)，補(bǔ)充到并發(fā)池
      if (urlQueue.length > 0) {
        const nextUrl = urlQueue.shift();
        const nextIndex = urls.indexOf(nextUrl);
        executing.add(request(nextUrl, nextIndex));
      }
    }
  };
  
  // 初始化并發(fā)池
  for (let i = 0; i < Math.min(limit, urls.length); i++) {
    const url = urlQueue.shift();
    executing.add(request(url, i));
  }
  
  // 等待所有請(qǐng)求完成
  await Promise.all(executing);
  return results;
}

// 用法示例
const urlList = Array.from({ length: 100 }, (_, i) => `/api/user/${i+1}`);
concurrentRequest(urlList, 5).then(allResults => {
  // 處理結(jié)果...
});

// 分頁(yè)核心狀態(tài)
const pagination = {
  pageNum: 1, // 當(dāng)前頁(yè)碼
  pageSize: 10, // 每頁(yè)條數(shù)
  total: 100, // 總數(shù)據(jù)量（可從接口返回）
  totalPages: 10 // 總頁(yè)數(shù)
};

// 渲染分頁(yè)數(shù)據(jù)
function renderTable(data) {
  const tableBody = document.getElementById('table-body');
  tableBody.innerHTML = data.map(item => `
    <tr>
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.phone}</td>
    </tr>
  `).join('');
}

// 加載指定頁(yè)數(shù)據(jù)
async function loadPageData(pageNum) {
  try {
    const response = await fetch(`/api/users?pageNum=${pageNum}&pageSize=${pagination.pageSize}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' }
    });
    
    if (!response.ok) {
      throw new Error('請(qǐng)求失敗');
    }
    
    const { data } = await response.json();
    renderTable(data);
    pagination.pageNum = pageNum; // 更新當(dāng)前頁(yè)碼
  } catch (error) {
    console.error('加載分頁(yè)數(shù)據(jù)失敗：', error.message);
  }
}

// 綁定分頁(yè)控件事件（上一頁(yè)/下一頁(yè)/頁(yè)碼點(diǎn)擊）
document.getElementById('prev-page').addEventListener('click', () => {
  if (pagination.pageNum > 1) {
    loadPageData(pagination.pageNum - 1);
  }
});

document.getElementById('next-page').addEventListener('click', () => {
  if (pagination.pageNum < pagination.totalPages) {
    loadPageData(pagination.pageNum + 1);
  }
});

// 初始化加載第一頁(yè)
loadPageData(1);

// 懶加載核心狀態(tài)
const lazyLoadState = {
  pageNum: 1,
  pageSize: 10,
  isLoading: false, // 防止重復(fù)請(qǐng)求
  hasMore: true // 是否還有更多數(shù)據(jù)
};

// 渲染列表數(shù)據(jù)
function renderList(data) {
  const listContainer = document.getElementById('list-container');
  data.forEach(item => {
    const listItem = document.createElement('div');
    listItem.className = 'list-item';
    listItem.innerHTML = `<h4>${item.name}</h4><p>${item.desc}</p>`;
    listContainer.appendChild(listItem);
  });
}

// 加載下一頁(yè)數(shù)據(jù)
async function loadNextPage() {
  if (lazyLoadState.isLoading || !lazyLoadState.hasMore) return;
  
  lazyLoadState.isLoading = true;
  try {
    const response = await fetch(`/api/users?pageNum=${lazyLoadState.pageNum}&pageSize=${lazyLoadState.pageSize}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' }
    });
    
    if (!response.ok) {
      throw new Error('請(qǐng)求失敗');
    }
    
    const { data, total } = await response.json();
    renderList(data);
    
    // 判斷是否還有更多數(shù)據(jù)
    const loadedTotal = (lazyLoadState.pageNum) * lazyLoadState.pageSize;
    lazyLoadState.hasMore = loadedTotal < total;
    
    // 更新頁(yè)碼
    lazyLoadState.pageNum++;
  } catch (error) {
    console.error('加載數(shù)據(jù)失敗：', error.message);
  } finally {
    lazyLoadState.isLoading = false;
  }
}

// 監(jiān)聽(tīng)滾動(dòng)事件，觸發(fā)懶加載
window.addEventListener('scroll', () => {
  // 計(jì)算滾動(dòng)距離：視口高度 + 滾動(dòng)條滾動(dòng)距離 >= 文檔高度 - 觸發(fā)閾值（如100px）
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight;
  const scrollHeight = document.documentElement.scrollHeight;
  
  if (scrollTop + clientHeight >= scrollHeight - 100) {
    loadNextPage();
  }
});

// 初始化加載第一頁(yè)
loadNextPage();