遞延對象與互相依賴

Question

我提出3 GET JSON調用myFunction()被調用按鈕上點擊多的getJSON調用。這些getJSON中的2個依賴於彼此的執行。它基本上解析10個網頁並收集一些數據。有了這些數據，它會轉到另一個頁面並收集一些其他數據。我想顯示「DONE」在myFunction末，使用戶知道我們終於得到了所有數據和搜索操作完成。然而，我認爲這些調用是異步的，所以我使用延遲對象。但是，即使我傳遞給$.when.apply(call1,call2,call3)所有的呼叫，它會顯示「DONE」被打印在控制檯上的任何數據之前。一旦它打印出「完成」，它就開始打印結果。如何修改我的代碼，這樣我就能夠顯示「完成」只有當myFunction的已經爲所有10張完全跑出，並已印在控制檯上的所有數據。

var call1 = []; 
var call2 = []; 
var call3 = []; 

function myFunction() { 
    data3 = []; 
    url = ''; // some URL here 
    call3.push($.getJSON(url, function(data4) { 
    data3 = data4; 
    })); 
    for (var page = 1; page < 10; page++) { 
    (function(page) { 
     url = 'http://example.com/' + page; 
     call1.push($.getJSON(url, function(data1) { 
      for (var num = 0; num < data1.standings.results.length; num++) { 
       (function(num) { 
        url = 'http://example.com/' + data1.entry[num]; 
        call2.push($.getJSON(url, function(data2) { 
         for (var i = 0; i < 15; i++) { 
         (function(i) { 
          console.log(data3.ele[(data2.p[i].element) - 1].x); 
          return; 
          } 
         })(i); 
        } 
        }) 
       ); 
       })(num); 
      } 
     }) 
    ); 
    })(page); 
}; 
$.when.apply(call1, call2, call3).then(function() { 
    console.log("DONE"); 
}); 
} 

Answer 1

我終於能夠解決這個問題。正如在評論中提到的，我們需要鏈中的各個承諾和功能結構應與when命令的結構。因此，在功能call1首次推，我需要調用命令時爲call1，然後窩在隨後的命令等。

var call1 = []; 
var call2 = []; 
var call3 = []; 

function myFunction() { 
    data3 = []; 
    url = ''; // some URL here 
    call3.push($.getJSON(url, function(data4) { 
    data3 = data4; 
    })); 
    for (var page = 1; page < 10; page++) { 
    (function(page) { 
     url = 'http://example.com/' + page; 
     call1.push($.getJSON(url, function(data1) { 
      for (var num = 0; num < data1.standings.results.length; num++) { 
       (function(num) { 
        url = 'http://example.com/' + data1.entry[num]; 
        call2.push($.getJSON(url, function(data2) { 
         for (var i = 0; i < 15; i++) { 
         (function(i) { 
          console.log(data3.ele[(data2.p[i].element) - 1].x); 
          return; 
          } 
         })(i); 
        } 
        }) 
       ); 
       })(num); 
      } 
     }) 
    ); 
    })(page); 
}; 
$.when.apply($, call1).then(function(){ 
$.when.apply($, call2).then(function(){ 
document.getElementsByName('output')[0].value+="Search Completed"+'\r\n'; 
}); 
}); 
}