Javascript和JQuery同步执行

Question

如果加载了 json 文件，我有一个附加一些元素的函数:

function loadNdraw(title, id){

    $("#containerCharts").html("");

    var date = $("#dateChart");

    var jqJSON = $.getJSON("charts/" + id + "/" + date.val() + ".json");

    jqJSON.done(

        function(data){

            $("#containerCharts").append(
                "<div class='divStandard'>"
                    + "<div class='titleChart'>"
                        + "<div style='float: left;'>" + title + "</div>"
                        + "<div style='float: right;'>" + data.lastUpdate +"</div>"
                        + "<div style='clear: both;'></div>"
                    + "</div>"
                    + "<center><div id='" + id + "' class='bodyChart'></div></center>"
                + "</div>"
            );

        }

    );

}

我多次调用这个函数

loadNdraw("A", "a");
loadNdraw("B", "b");
loadNdraw("C", "c");
loadNdraw("D", "d");

我的问题是它没有按此顺序加载。

每次加载页面时，A,B,C,D的顺序是随机的。

如何强制按顺序加载？

我不想对json进行排序。

Answer 1

你可以在jquery中使用.promise()函数

function loadNdraw(title, id){

    var dfd = jQuery.Deferred();

    $("#containerCharts").html("");

    var date = $("#dateChart");

    var jqJSON = $.getJSON("charts/" + id + "/" + date.val() + ".json");

    jqJSON.done(

        function(data){

            $("#containerCharts").append(
                "<div class='divStandard'>"
                    + "<div class='titleChart'>"
                        + "<div style='float: left;'>" + title + "</div>"
                        + "<div style='float: right;'>" + data.lastUpdate +"</div>"
                        + "<div style='clear: both;'></div>"
                    + "</div>"
                    + "<center><div id='" + id + "' class='bodyChart'></div></center>"
                + "</div>"
            );

        }

    );

    dfd.resolve(true);

}

然后你可以简单地调用

$.when( loadNdraw("A", "a") ).then(
  $.when( loadNdraw("B", "b") ).then(
  //Some code 
  );
);

您可以根据需要简单地使用.promise