您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

jQuery Deferred/Promise：done/then 返回值傳遞機制差異詳解

編輯：程式設計疑難解答

代碼與現象

var defer = $.Deferred();
defer.done(function(a, b) { return a * b; })      // 1. 返回 6
     .done(function(result) { console.log(result); }) // 輸出 2？為何非 6？
     .then(function(a, b) { return a * b; })      // 2. 返回 6
     .done(function(result) { console.log(result); }) // 輸出 6
     .then(function(a, b) { return a * b; })      // 3. 返回 6
     .done(function(result) { console.log(result); }); // 輸出 6
defer.resolve(2, 3);

疑問：第一個 `done` 返回 6，第二個 `done` 卻收到 2（第一個參數），3 去哪了？

核心規則

方法	回調參數來源	返回值作用
done/fail/always	原始 resolve/reject 參數（不變）	被忽略，不傳遞給下一個回調
then	上一個 `then`/`pipe` 的返回值	作為下一個 then 的參數傳遞
pipe (已棄用，同 then)	同上	同上

本例逐步執行

`resolve(2,3)` → 參數列表 `[2,3]`。
第一個 `done(a,b)`：收到 `2,3`，返回 `6`，**但 `done` 返回值被丟棄**。
第二個 `done(result)`：仍收到 **原始參數列表** `[2,3]`，`result` 為第一個參數 `2`。故輸出 `2`。
第一個 `then(a,b)`：收到原始 `[2,3]`，返回 `6`，**此返回值成為下一個回調參數**。
第三個 `done(result)`：收到單參數 `6`，輸出 `6`。
後續 `then`/`done` 同理，均傳遞單值 `6`。

最佳實踐

需**鏈式傳遞計算結果** → 全程用 `then`（或 `pipe`）。
需**多處獨立處理同一結果** → 用多個 `done`，但參數始終是 `resolve` 的原始參數。
現代代碼建議改用 **原生 Promise / async-await**，語義更清晰：

const result = await new Promise((resolve) => resolve(2, 3)); // 實際只取第一個參數
// 推薦：resolve 單個對象/數組
const [a, b] = await Promise.resolve([2, 3]);
const r1 = a * b; // 6
const r2 = r1 * b; // 18 ...