如何解決幾個遞延內`promise.then（）`

Question

我需要運行多個並行的功能裏面promise.then（） 我試圖用這樣的代碼波紋管，但它的工作不正確：

function fadeElement(selector){ 
     return function() { 
      return $(selector).fadeOut(400).promise(); 
     } 
} 

function runParallel(owner, promises) { 
    return function() { 
     var differed = new $.Deferred(); 
     var resolveDiffered = function() { differed.resolve(); }; 
     $.when.apply(owner, promises). 
      then(resolveDiffered); 
     return differed.promise(); 
    } 
} 

FormInput.prototype.ReloadPage = function(){ 
    var firstOne = fadeElement('#element_Id_1'); 
    var firstTwo = fadeElement('#element_Id_2'); 
    var firstThree = fadeElement('#element_Id_3'); 

    var secondOne = fadeElement('#element_Id_4'); 

    var thirdOne = fadeElement('#element_Id_5'); 
    var thirdTwo = fadeElement('#element_Id_6'); 

    $.when(firstOne(), firstTwo(), firstThree()) 
    .then(secondOne) 
    .then(
     runParallel(this, [thirdOne(), thirdTwo()]) 
    ); 
} 

firstOne，firstTwo，firstThree，secondOne是沒有400ms的時間運行。

thirdOne，thirdTwo - 不會運行在所有。

我想我有一個錯誤在runParallel，但我沒有帶足夠的知識understend哪裏。我是這麼認爲的，becouse這個代碼將工作：

$.when(firstOne(), firstTwo(), firstThree()) 
.then(secondOne) 
.then(thirdOne) 
.then(thirdTwo); 

Answer 1

的問題是，你打電話thirdOne和thirdTwo（並由此開始衰落的過程），當您通過這些功能來runParallel：

.then(
    runParallel(this, [thirdOne(), thirdTwo()]) 
); 

相反，你應該刪除最後一個()，並通過功能runParallel，應該每種方法映射到調用它的結果。當改變各承諾生成函數被調用的位置將允許延遲衰落過程，直到可以在對方兌現承諾完成後：

function fadeElement(selector) { 
 
    return function() { 
 
    return $(selector).fadeOut(400).promise(); 
 
    } 
 
} 
 

 
function runParallel(owner, promises) { 
 
    return function() { 
 
    return $.when.apply(owner, promises.map($.call, $.call)) 
 
    } 
 
} 
 

 
FormInput.prototype.ReloadPage = function() { 
 
    var firstOne = fadeElement('#element_Id_1'); 
 
    var firstTwo = fadeElement('#element_Id_2'); 
 
    var firstThree = fadeElement('#element_Id_3'); 
 

 
    var secondOne = fadeElement('#element_Id_4'); 
 

 
    var thirdOne = fadeElement('#element_Id_5'); 
 
    var thirdTwo = fadeElement('#element_Id_6'); 
 

 
    $.when(firstOne(), firstTwo(), firstThree()) 
 
    .then(secondOne) 
 
    .then(
 
     runParallel(this, [thirdOne, thirdTwo]) 
 
    ); 
 
} 
 

 

 
function FormInput() { 
 

 
} 
 

 
new FormInput().ReloadPage()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="element_Id_1">1</div> 
 
<div id="element_Id_2">2</div> 
 
<div id="element_Id_3">3</div> 
 
<div id="element_Id_4">4</div> 
 
<div id="element_Id_5">5</div> 
 
<div id="element_Id_6">6</div>