如何在兩個 $.getJSON 函數之后使這個函數發生？

Question

最初，我只有$(document).ready(update()); 但這不起作用，因為第一個$.getJSON太慢了。 當我添加 setTimeout 時，第一個$.getJSON加載但第二個沒有。 現在，我明白為什么會發生這種情況（因為 JSON 是異步的），但我不明白我應該如何修復它。 我一直在看.then ，但每次使用它時，似乎我要么使用不正確，要么不會改變情況。

// Original Code

$.getJSON("workshops.json", function(data){
    workshopData = data;
});

$.getJSON("summers.json", function(data){
    summerData = data;
});

$(document).ready(function(){
    setTimeout(update(), 0);
});

// Attempt at .then
function gatherData(){
    $.getJSON("workshops.json", function(data){
        workshopData = data;
    });

    $.getJSON("summers.json", function(data){
        summerData = data;
    });
};

gatherData().then(function(e){
    update();
    console.log("test");
});

Answer 1

如果您還沒有准備好Promise和async/await 。 您現在可以堅持使用“回調地獄”：

$.getJSON("workshops.json", function(data){
    workshopData = data;
    $.getJSON("summers.json", function(data){
        summerData = data;
        update();
        console.log("test");
    });
});

當一個請求編譯時，它將調用下一個請求的嵌套回調。 當它完成第二個回調將調用update

Answer 2

您可以在此處使用 jQuery 的$.when()方法。 $.when()方法接受延遲參數列表，例如$.getJSON方法返回的jqXHR請求（您可以將 jqXHR 視為包裝Promise接口的對象）。 然后$.when()將同時運行每個延遲的操作，並以解析的值作為參數執行.done()回調。

請參閱下面的示例：

function gatherData() {
  const jqxhr1 = $.getJSON("workshops.json");
  const jqxhr2 = $.getJSON("summers.json");
  return $.when(jqxhr1, jqxhr2);
}

gatherData().done(function(workshopData, summerData) {
  console.log("workshop data: ", workshopData);
  console.log("summer data: ", summerData);
  update(); // call update which can now access workshopData and summerData (if passed through)
});