第一个 jQuery ajax 调用与第二个冲突

Question

我有一个名为 loadPosts 的 jQuery 函数，它接受三个参数：skip、take 和 container。 Skip 告诉 MVC Json 调用要跳过多少个帖子，take 表示要接受多少个帖子，而 container 是写入帖子的元素。

function loadPosts(skip, take, container) {
    $.ajax({
        url: '/Ajax/LoadPosts',
        type: 'POST',
        dataType: 'json',
        data: { skip: skip, take: take },
        success: function (posts) {
            if (posts == null) {
                return;
            }
            var items = '';
            $.each(posts, function (p, post) {
                items += ...;
            });

            alert(items);

            var $itemBlock = $(items);
            container.append($itemBlock);
            container.imagesLoaded(function () {
                container.masonry('appended', $itemBlock);
            });

            return;
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
            console.log(xhr.responseText);
            console.log(thrownError);
            return;
        }
    });
}

该方法在页面加载时被调用两次；首先加载最新的帖子（skip = 0，take = 10），然后加载完整的帖子集（skip = pageIndex * pageSize，take = pageSize）。

$(document).ready(function () {
    if ($('#post-container') && $('#recent-container')) {
        var skip = (pageIndex * pageSize);
        var take = pageSize;

        var $postContainer = $('#post-container');
        loadPosts(skip, take, $postContainer);

        var $recentPostContainer = $('#recent-container');
        loadPosts(0, 10, $recentPostContainer);

    }
}

每个函数本身（如果我注释掉其中一个）都可以正常工作。只有当我同时运行这两个函数时，我才会遇到两个异常之一。

1. ExecuteReader requires an open and available Connection. The connection's current state is connecting.
2. There is already an open DataReader associated with this Command which must be closed first.

这是那个函数

public static bool Get(int skip, int take, ListSortDirection direction, out List<Post> posts)
{
    try
    {
        posts = Db.Posts.OrderBy(p => p.DateTimeCreated, direction).Skip(skip).Take(take).ToList();
        return true;
    }
    catch (Exception ex)
    {
        posts = new List<Post>();
        return false;
    }
}

我认为正在发生的是，第二个实例在第一个实例有机会完成之前就开始了。我想做的是找到一种方法，等到第一个完成后再开始另一个。

任何帮助将不胜感激。 谢谢！

Answer 1

返回$.ajax内部返回的promise。

function loadPosts(skip, take, container) {
   return $.ajax({ /* options left out for brevity */})
}

然后可以使用第一个实例的 promise 回调来初始化第二个实例

loadPosts(skip, take, $postContainer).done(function(){
    loadPosts(0, 10, $recentPostContainer);
});