jQuery中AJAX执行前无法显示指定提示文本问题求解

代码中AJAX配置了async: false强制启用同步请求，同步请求会阻塞浏览器UI渲染线程：虽然你在请求发起前已经执行了修改DOM文本为Calculating now...的逻辑，但浏览器还没来得及将这个DOM变更绘制到页面，线程就被同步AJAX完全占用，直到所有请求执行完成后才会统一刷新UI，因此无法看到预期的加载提示。
提示：同步XMLHttpRequest已被Web标准标记为废弃特性，会造成页面卡顿、交互无响应等问题，不建议继续使用。

核心调整逻辑：

• 移除async: false配置，恢复AJAX异步执行特性，避免阻塞UI渲染
• 将AJAX请求封装为Promise对象，配合async/await保证距离累加的执行顺序
• 缓存重复使用的jQuery DOM对象，减少重复DOM查询的性能开销
• 用closest('tr')替换多层parent()链式调用，提升DOM查找的稳定性，避免DOM层级微小变动导致逻辑失效

修正后完整代码：

$(function(){
    $('.calculate').click(async function(){
        // 缓存DOM对象
        const $currentRow = $(this).closest('tr');
        const $resultContainer = $currentRow.find('td span.google');
        // 先渲染加载提示，异步请求不会阻塞UI，提示会立刻展示
        $resultContainer.text('Calculating now...');
        
        let totalDistance = 0;
        const tripLegItems = $currentRow.find('td span.tripleg');

        // 逐段请求计算距离
        for (let i = 0; i < tripLegItems.length; i++) {
            const $leg = $(tripLegItems[i]);
            const origin = $leg.attr('origin');
            const destinations = $leg.attr('destinations');

            // 等待当前段请求返回后再处理下一段
            const legDistance = await new Promise((resolve) => {
                $.ajax({
                    type: "GET",
                    url: 'includes/calculate_distance.php?action=distance_analysis',
                    data: {
                        origin: origin,
                        destinations: destinations,
                        google_api_key: google_api_key
                    },
                    success: (res) => resolve(parseFloat(res) || 0),
                    error: () => resolve(0) // 单段请求失败时按0计算，避免整体逻辑中断
                });
            });

            totalDistance += legDistance;
        }

        // 所有计算完成后展示最终结果
        $resultContainer.text(totalDistance.toFixed(2));
    });
});

优化提示：如果行程段数量较多，可以改用Promise.all并行发起所有计算请求，等所有请求返回后统一累加结果，能大幅缩短总计算时长，加载提示依然可以正常显示。

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