首先jQuery的Ajax调用与第二碰撞 [英] First jQuery ajax call collides with the second

问题描述

我有一个名为loadPosts一个jQuery函数接受三个参数，跳，拍摄和容器。跳过讲述了MVC的Json调用的许多职位如何跳过，以表明职位采取和集装箱的数量是该职位被写入元素。

I have a jQuery function called loadPosts which accepts three parameters, skip, take and container. Skip tells the MVC Json call how many posts to skip, take indicates the number of posts to take and container is the element that the posts are written to.

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

此方法被调用两次在页面加载时;首先加载最新的职位（跳过= 0，取= 10），然后装载全套职位（跳过=的PageIndex * pageSize的，取= pageSize的）。

This method is called twice when the page loads; first to load the most recent posts (skip = 0, take = 10) and then to load the full set of posts (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);

    }
}

在本身各功能（如果我注释掉其中之一）将正常工作。只有当我运行这两个功能做我遇到两个例外之一。

Each function in and of itself (if I comment out one of them) will work fine. It's only when I run both functions do I encounter one of two exceptions.

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

我认为正在发生的是，第一个有机会完成之前，第二个实例开始。我想要做的是找到一种方法来等待，直到第一个具有其他开始前完成。

What I think is happening is that the second instance is starting before the first has had a chance to complete. What I want to do is find a way to wait until the first has completed before the other starts.

任何帮助将大大AP preciated。
谢谢！

Any help would be greatly appreciated. Thanks!

推荐答案

返回的承诺， $。阿贾克斯内部返回。

Return the promise that $.ajax returns internally.

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

然后可以使用一审承诺回调初始化第二个

Can then use promise callback of first instance to initialize second

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

这篇关于首先jQuery的Ajax调用与第二碰撞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！