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

时间:2016-01-28 00:01:07

标签: jquery asp.net-mvc asp.net-ajax

我有一个名为loadPosts的jQuery函数,它接受三个参数:skip,take和container。 Skip告诉MVC Json调用要跳过的帖子数量,take表示要发布的帖子数量,而容器是帖子写入的元素。

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

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

非常感谢任何帮助。 谢谢!

1 个答案:

答案 0 :(得分:2)

返回$.ajax内部返回的承诺。

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

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

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