如何在循环中正确使用jQuery Deferred处理异步任务

你的updateStationData函数存在两个核心问题：

• 外层创建的$dfd从未调用resolve()，导致这个Deferred永远不会进入完成状态，后续的then回调永远不会触发。
• $.each遍历中返回的$dfd2.promise()对$.each没有作用，它不会等待这些异步操作完成，遍历会直接走完，外层函数立刻返回未完成的Promise。

优化方案 #

我们可以收集所有getFullCoordPack调用返回的Promise，等待全部完成后再标记updateStationData完成。同时利用jQuery AJAX本身返回Promise的特性，简化不必要的Deferred创建。

完整优化代码

// 简化loadStationData：$.getJSON本身返回Promise，无需手动创建Deferred
function loadStationData() {
    return $.getJSON('../backend/navigation/get-stations.php')
        .done(function(data) {
            stationData = data;
        });
}

function updateStationData() {
    // 收集每个异步操作的Promise
    const promiseArr = [];
    
    $.each(stationData, (i, v) => {
        // 把每个getFullCoordPack的Promise加入数组，同时在完成时更新数据
        const promise = getFullCoordPack(v.lat, v.lng).then(function(coords) {
            delete v.lat;
            delete v.lng;
            v.coords = coords;
        });
        promiseArr.push(promise);
    });
    
    // 等待所有异步操作完成后，返回统一的Promise
    return $.when.apply($, promiseArr);
}

// 按依赖顺序执行：先加载数据，再更新数据
loadStationData().then(updateStationData).then(() => {
    // 所有加载、更新操作完成后执行逻辑
    // do stuff
});

关键改动说明 #

1. 简化loadStationData：$.getJSON本身返回jQuery Promise，直接返回它即可，用.done处理数据赋值，省去手动创建Deferred的冗余代码。
2. 收集异步任务Promise：遍历stationData时，将每个getFullCoordPack的Promise存入数组，同时在then回调里完成数据更新操作。
3. 等待全部任务完成：通过$.when.apply($, promiseArr)将数组中的Promise批量传入$.when，它会在所有Promise都完成后resolve，确保updateStationData返回的Promise仅在所有数据更新完成后才进入完成状态。
4. 修正执行顺序：原代码中$.when(loadStationData(), updateStationData())会同时触发两个函数，但updateStationData依赖stationData，必须等loadStationData完成后才能执行，改用.then链式调用确保顺序正确。

ES6+ 简化版本（若环境支持）

可以用原生Promise.all替代$.when，代码更简洁：

function updateStationData() {
    const promiseArr = stationData.map((v) => {
        return getFullCoordPack(v.lat, v.lng).then(coords => {
            delete v.lat;
            delete v.lng;
            v.coords = coords;
        });
    });
    
    return Promise.all(promiseArr);
}

内容的提问来源于stack exchange，提问作者TheCarver