javascript - 如何让JQuery json函数在javascript之前运行

Question

我以前从未使用过 JQuery。我正在尝试打开一个 json 文件并将一些值存储在一个名为 points 的变量中。当我的代码运行时，它会在其余的 javascript 之后运行 Jquery，但我需要先运行它。有人可以解释一下它的顺序是如何工作的以及我如何更好地构建它。

var points = [];

$.getJSON("3_clusters.json", function(json){
    console.log('Starting collating points')
    for (var row=0; row<json.X.length; row++){
        points.push([json.X[row][0], json.X[row][1]]);
    }
    console.log('Finished collating points')
});

console.log("This should run after json loaded");

它应该创建 points 变量，执行 getJSON 操作，然后输出控制台消息。

Answer 1

有多种方法可以做到这一点:

1. 使用回调函数:

var getJSON = function (callback) {
    var points = [];

    $.getJSON("3_clusters.json", function(json){
        console.log('Starting collating points')
        for (var row=0; row<json.X.length; row++){
            points.push([json.X[row][0], json.X[row][1]]);
        }
        console.log('Finished collating points')

        callback();
    });

};

getJSON(function () {
    console.log("This should run after json loaded");
});

1. 使用异步函数:

(async function () {
    var points = [];

    var json = await $.getJSON("3_clusters.json");

    console.log('Starting collating points')
    for (var row=0; row<json.X.length; row++){
        points.push([json.X[row][0], json.X[row][1]]);
    }
    console.log('Finished collating points');

    console.log("This should run after json loaded");
}());

1. 使用 Promise:

var task = new Promise(function (done) {
    var points = [];

    $.getJSON("3_clusters.json", function(json){
        console.log('Starting collating points')
        for (var row=0; row<json.X.length; row++){
            points.push([json.X[row][0], json.X[row][1]]);
        }
        console.log('Finished collating points')

        done();
    });
});

task.then(function () {
    console.log("This should run after json loaded");
});