如何使用jQuery延遲（當/然後等）來修復厄運問題的異步金字塔

Question

我一直困惑了很長一段時間，試圖圍繞JavaScript承諾包紮我的頭。我想解決一些與我的代碼中的異步調用有關的問題，以便去除它。但我很樂意有專家來幫助我，因爲我已經浪費了相當一段時間了。因爲我已經在我的項目中使用了jQuery（v1.11），並且我不想再添加任何更多的庫（已經有5個以上），所以我想使用jQuery Deferreds。我讀過jQuery沒有完全遵循Promises/A規範，但我認爲它足夠用於我的用例。稍後我會看看q.js或其他庫。

我試圖創建一個簡單的例子，我已經熟悉JavaScript的asynchroneous行爲，通過這太問題作爲例證： setTimeout delay not working

我創建了一個JS提琴，以解決用戶的問題，但使用「厄運的金字塔」結構： http://jsfiddle.net/bartvanderwal/31p0w02b/

現在我想的是如何使用的承諾和鏈接的方法調用，然後使用（拉平這個金字塔一個不錯的裸機爲例）的或東西：

$.when(takeStep()) 
    .then(takeStep()) 
    .then(takeStep()) 
    .then(takeStep()).. 

但是我不能得到它的工作。我嘗試迄今在這個小提琴： http://jsfiddle.net/bartvanderwal/vhwnj6dh/

---

編輯20:58：這是現在的工作小提琴感謝（主要是）@Bergi： http://jsfiddle.net/bartvanderwal/h2gccsds/

Answer 1

但我不能讓它的工作

幾點：

• 不使用一系列的deferreds，更不是一個全球性的！將其分解爲單個步驟，併爲每個步驟使用單個承諾。
• 使用計數器值來解決承諾。承諾應始終代表（異步）結果。
• ，除非你需要等待多個承諾
• then確實需要一個回調函數不使用$.when。您不能撥打takeStep()，但可以通過。

您也可能想看看this answer的拇指規則以熟悉承諾。

// the most generic function that only waits and returns a promise 
function wait(t, v) { 
    var d = new $.Deferred(); 
    setTimeout(function() { 
     d.resolve(v); 
    }, t); 
    return d.promise(); 
} 

// logs the value and returns the next number 
function markStep(nr) { 
    log('step ' + cntr + ': ' + getCurrentTime()); 
    return nr+1; 
} 
// waits before logging and returns a promise for the next number 
function takeStep(nr) { 
    return wait(stepTime, nr).then(markStep); 
} 

takeStep(0) 
.then(takeStep) 
.then(takeStep) 
.then(takeStep) 
.then(takeStep) 
.done(function(nr) { 
    log('done (' + getCurrentTime() + ')'); 
});