jQuery AJAX 回調函數執行順序詳解：為什麼代碼「跑到下面去了」？

核心誤區

許多初學者認為代碼是「自上而下同步執行」的，但 $.ajax() 默認 async: true（異步），發送請求後立即返回，主線程繼續執行後續代碼；只有當服務器響應到達，瀏覽器才將回調函數（success/done/complete）推入任務隊列，待主線程空閒時執行。

執行時間線圖解

時間 →
主線程: |---發送AJAX---|---執行後續代碼(showDetail)---|---空閒---|---執行回調函數(data處理)---|
網絡IO:                |========請求/響應========|
事件循環:                                              |回調入隊|->|回調執行|

錯誤現場還原

$.ajax({ url: '/api/data', success: function(data) {
    render(data);          // ① 回調內：渲染數據
} });
showDetail();              // ② 主線程：立即執行，但 data 尚未就緒 → 報錯/顯示空

三種修正模式

1. 回調地獄 → Promise 鏈（推薦）：

   $.ajax({url: '/api/data'})
     .done(function(data) { render(data); })
     .then(function() { showDetail(); }); // 確保渲染完成後執行

2. async/await（現代語法，需 Babel/TypeScript 編譯）：

   async function loadAndShow() {
       const data = await $.ajax({url: '/api/data'});
       render(data);
       showDetail();
   }

3. 同步阻塞（強烈不推薦，會凍結 UI）：

   $.ajax({ url: '/api/data', async: false, success: ... });
   showDetail();

最佳實踐清單

• 默認保持 async: true，拒絕同步 AJAX。
• 統一使用 .done()/.fail()/.always() Promise API，避免傳統 success/error/complete 回調屬性（jQuery 3.0+ 棄用）。
• 業務邏輯「依賴數據」的代碼，**全部放入回調/then 鏈中**，或封裝為返回 Promise 的函數。

理解「發起請求 ≠ 獲得數據」，掌握異步編程模型，是前端進階的分水嶺。