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

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");
});

2. 使用异步功能：

(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");
}());

3. 使用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");
});