对 MVC 控制器的多个 JQuery getJSON 调用未同步执行

Question

我正在使用 MVC4 构建 POC。我对 2 个不同的 MVC 控制器有一些 jquery json 调用。我需要第二个等到第一个完成后再运行，因为第二个需要在第一个中创建的 cookie。 GetUserItem 应该首先运行，然后 GetMoreFeedItems 应该运行。

这是我的代码 sn-p：

var pageNumber = 0;
var feedCount = -1;
var itemsLoaded = 0;
var resultsPerPage = 10;
var loadingData = false;

$(document).ready(function () {

    GetUserItem();
});


function GetUserItem() {

    $.getJSON('/controllers/User/', function (result) {

        var root = $.parseJSON(result);
        var user = root["root"];

        $.each(user, function (i, item) {
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Id: ' + item.uid + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Username: ' + item.username + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Name: ' + item.first_name + " " + item.last_name + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Birthday: ' + item.birthday + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:125px;">Profile Pic: <img alt="' + item.username + '" src="' + item.pic_small + '" /><br/>' + '</div>');
        });

    });

    GetMoreFeedItems();    
}

function GetMoreFeedItems() {
    if (feedCount == -1 || itemsLoaded < feedCount) { 

        if (loadingData === false) {
            loadingData = true;

            //Add loading spinner
            $('#feed-container').append('<div id="loader" style="height:20px; background-image:url(Images/loading_gray.gif);background-repeat:repeat-x;"></div>');

            $.getJSON('/controllers/Feed/' + pageNumber + '/' + resultsPerPage, function (result) {

                feedCount = result.substring(0, result.indexOf(','));

                var feed = $.parseJSON(result.substr(result.indexOf(',') + 1));

                $.each(feed, function (i, item) {
                    if (item.itemtype === "checkin")
                        $('#feed-container').append(buildOne(item));
                    else if (item.itemtype === "like")
                        $('#feed-container').append(buildTwo(item));
                    else if (item.itemtype === "post")
                        $('#feed-container').append(buildThree(item));
                    else if (item.itemtype === "message")
                        $('#feed-container').append(buildFour(item));
                    else if (item.itemtype === "story")
                        $('#feed-container').append(buildFive(item));
                });

                loadingData = false;
                itemsLoaded += resultsPerPage;

                //Remove loading spinner
                $('#loader').remove();
            });
        }
    }
}

Answer 1

将对GetMoreFeedItems() 的调用放在$.getJSON() 的成功函数中。

function GetUserItem() {

    $.getJSON('/controllers/User/', function (result) {

        var root = $.parseJSON(result);
        var user = root["root"];

        $.each(user, function (i, item) {
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Id: ' + item.uid + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Username: ' + item.username + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Name: ' + item.first_name + " " + item.last_name + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:25px;">Birthday: ' + item.birthday + '<br/>' + '</div>');
            $('#user-container').append('<div style="border-bottom: 1px solid black; height:125px;">Profile Pic: <img alt="' + item.username + '" src="' + item.pic_small + '" /><br/>' + '</div>');
        });

        GetMoreFeedItems();    


    });

}