jQuery $.ajax 默認異步機制解析：為何「未設置 async:false 卻表現同步」？

核心結論

$.ajax 默認 async: true（異步）。若觀察到「同步阻塞」現象，必是代碼邏輯或判斷方式有誤。

異步執行流程圖解

// 發起請求
$.ajax({
    url: '/api/data',
    success: function(res) {
        console.log('2. 請求完成，執行回調', res);
    }
});

console.log('1. 發起請求後立即執行，不等待響應');

// 輸出順序：
// 1. 發起請求後立即執行，不等待響應
// 2. 請求完成，執行回調 {data: ...}

常見「偽同步」誤判場景

1. Promise/Deferred 鏈式調用被誤認為同步

function fetchData() {
    return $.ajax({ url: '/api' }); // 返回 Promise
}

fetchData().done(function(res) {
    console.log('回調執行');
});
console.log('外層代碼'); // 先輸出「外層代碼」→ 異步！

若在 .done() 內部執行耗時操作導致界面卡頓，以為是同步阻塞，實際是 JS 單線程事件循環被佔用。

2. 瀏覽器開發工具 Network 面板「瀑布流」視覺誤導

• 請求發出 → 等待響應 → 接收數據，時間線上顯示為連續塊，新手以為代碼卡在那裡等待。
• 實際 JS 主線程早已釋放，繼續執行後續代碼。

3. 同步請求 (async: false) 已棄用

// 強烈不推薦！會阻塞主線程，導致頁面無響應
$.ajax({ url: '/api', async: false, success: ... });

現代瀏覽器控制台會報警告：Synchronous XMLHttpRequest on the main thread is deprecated...

正確判斷異步的方法

console.time('ajax');
$.ajax({
    url: '/api',
    success: function() { console.timeEnd('ajax'); }
});
console.time('sync');
console.timeEnd('sync'); // 先輸出 sync: 0.xxxms
// 稍後輸出 ajax: 200.xxxms (含網絡耗時)

最佳實踐：拥抱 Promise / async-await

// jQuery 3.0+ 返回 Promise，可直接 await
async function loadData() {
    try {
        const res = await $.ajax({ url: '/api/data' });
        console.log('異步等待，代碼如同步寫法', res);
    } catch (err) {
        console.error(err);
    }
}

總結

• 未設置 async → 默認 true（異步）。
• 「表現同步」通常是回調地獄邏輯混淆或主線程被後續耗時操作阻塞。
• 請使用 async/await 或 Promise 管理異步流程，避免手動判斷同步/異步。