我如何使此函数在两个$ .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()方法接受一系列延迟参数，例如$.when()方法返回的jqXHR请求（您可以将jqXHR视为包装$.getJSON接口的对象）。然后，Promise将同时运行每个延迟的操作，并以解析值作为参数执行$.when()回调。

请参见下面的示例：

.done()