AJAX 非同步請求回調中 DOM 操作被覆蓋問題分析

問題描述

循環調用 kuaisuxuanren(x)，每次請求返回動態生成 <li> 追加到容器，但後續請求結果覆蓋前一次內容。

代碼審視關鍵點

var persons = document.getElementById(x); // 關鍵：x 為參數，每次傳入不同 ID？
persons.appendChild(li); // 追加到對應容器

可能原因與對策

1. 容器選擇器錯誤：若 x 為固定值或邏輯導致所有請求操作同一容器，則為正常追加非覆蓋。若確為覆蓋，檢查是否在回調前執行了 persons.innerHTML = '' 或 $(persons).empty()。
2. 閉包變量捕獲問題：循環中使用 var 宣告導致回調共享同一變量，改用 let 或 IIFE 封裝。
3. 伺服端返回全量資料：若 API 返回累積資料，前端需自行去重或分頁追加。

現代化重寫建議

async function loadPersons(containerId, keyword) {
    const container = document.getElementById(containerId);
    const resp = await fetch('/api/search', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({keyword})
    });
    const {jsonData: {var: list}} = await resp.json();
    list.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item.name;
        li.dataset.email = item.email;
        container.appendChild(li);
    });
}

// 並發控制：限制同時 3 個請求
async function runAll() {
    const tasks = ['id1','id2','id3'].map(id => loadPersons(id, getKeyword(id)));
    await Promise.all(tasks);
}

使用 fetch + async/await 替代 XMLHttpRequest，邏輯更清晰，易於並發控制與錯誤處理。