Question

我需要进行3次或更少的ajax调用，并且响应需要按照请求的顺序附加到dom。

我有以下功能，但问题是我得到的回复在附加到dom后不一定是正确的顺序。

我不想使用async：false属性，因为它会阻止UI，当然它会受到性能影响。

mod.getArticles = function( ){
    //mod.vars.ajaxCount could start at 0-2
    for( var i = mod.vars.ajaxCount; i < 3; i++ ){
        //mod.vars.pushIds is an array with the ids to be ajaxed in
        var id = mod.vars.pushIds[i];

        $.ajax({
            url: '/ajax/article/' + id + '/',
            type: "GET",
            dataType: 'HTML',
            error: function() {
                console.error('get article ajax error');
            }
        }).done( function( data ) {
            if (data.length) {
                mod.appendArticle( data );
            } else {
                console.error('get article ajax output error');
            }
        });
    }
};

Answer 1

您需要根据您拥有的i变量将文章追加到某个位置。或者您可以等待所有请求，然后按顺序附加它们。像这样：

mod.getArticles = function( ){
    var load = function( id ) {
        return $.ajax({
            url: '/ajax/article/' + id + '/',
            type: "GET",
            dataType: 'HTML',
            error: function() {
                console.error('get article ajax error');
            });
        };
    var onDone = function( data ) {
            if (data.length) {
                mod.appendArticle( data );
            } else {
                console.error('get article ajax output error');
            }
        };
    var requests = [];
    for( var i = mod.vars.ajaxCount; i < 3; i++ ){
        requests.push(load(mod.vars.pushIds[i]));
    }

    $.when.apply(this, requests).done(function() {
        var results = requests.length > 1 ? arguments : [arguments];
        for( var i = 0; i < results.length; i++ ){
            onDone(results[i][0]);
        }
    });
};

Answer 2

以下是使用i在完成加载后以正确顺序附加它们的示例：

mod.getArticles = function( ){
    // initialize an empty array of proper size
    var articles = Array(3 - mod.vars.ajaxCount);
    var completed = 0;
    //mod.vars.ajaxCount could start at 0-2
    for( var i = mod.vars.ajaxCount; i < 3; i++ ){
        // prevent i from being 3 inside of done callback
        (function (i){
            //mod.vars.pushIds is an array with the ids to be ajaxed in
            var id = mod.vars.pushIds[i];
            $.ajax({
                url: '/ajax/article/' + id + '/',
                type: "GET",
                dataType: 'HTML',
                error: function() {
                    console.error('get article ajax error');
                }
            }).done( function( data ) {
                completed++;
                if (data.length) {
                    // store to array in proper index
                    articles[i - mod.vars.ajaxCount] = data;
                } else {
                    console.error('get article ajax output error');
                }
                // if all are completed, push in proper order
                if (completed == 3 - mod.vars.ajaxCount) {
                    // iterate through articles
                    for (var j = mod.vars.ajaxCount; j < 3; j++) {
                        // check if article loaded properly
                        if (articles[j - mod.vars.ajaxCount]) {
                            mod.appendArticle(articles[j - mod.vars.ajaxCount]);
                        }
                    }
                }
            });
        }(i));
    }
};

Answer 3

var success1 = $.ajax...
var success2 = $.ajax...
var success3 = $.ajax...
$.when(success1, success2, success3).apply(ans1, ans2, ans3) {
finalDOM = ans1[0]+ans2[0]+ans3[0];
}

检查this以获取更多参考。这仍然是异步的，但它等待所有这些完成。您已经知道了调用的顺序，因为它是通过您的代码完成的，因此请相应地添加dom元素。

Answer 4

尝试将is数组中的项目用作索引;要设置为mod.vars的{{1}}属性，请在响应数组中的id索引处设置返回的$.ajaxSettings。所有请求完成后，data this.id应与results值的顺序相同。

array

jsfiddle http://jsfiddle.net/6j7vempp/2/

Answer 5

完全依赖闭包的解决方案可以解决问题。他们将始终以正确的顺序附加单个mod.getArticles()电话的文章。但是在第一次完全满意之前考虑第二次通话。由于该过程的异步性，可以想象第二个呼叫的一组文章可以在第一个之前附加。

更好的解决方案可以保证即使是mod.getArticles()来电的快速火警序列也会：

以正确的顺序附上每个电话的文章
以正确的顺序附加所有文章

对于每篇文章，一种方法是：

将一个容器（div）同步附加到DOM并保留对它的引用
在容器到达时异步填充容器。

要实现此目的，您需要修改mod.appendArticle()以接受第二个参数 - 对容器元素的引用。

mod.appendArticle = function(data, $container) {
    ...
};

为方便起见，您还可以选择创建一个新方法mod.appendArticleContainer()，它创建一个div，将其附加到DOM并返回对它的引用。

mod.appendArticleContainer = function() {
    //put a container somewhere in the DOM, and return a reference to it.
    return $("<div/>").appendTo("wherever");
};

现在，mod.getArticles()仍然非常简单：

mod.getArticles = function() {
    //Here, .slice() returns a new array containing the required portion of `mod.vars.pushIds`.
    //This allows `$.map()` to be used instead of a more cumbersome `for` loop.
    var promises = $.map(mod.vars.pushIds.slice(mod.vars.ajaxCount, 3), function(id) {
        var $container = mod.appendArticleContainer();//<<< synchronous creation of a container
        return $.ajax({
            url: '/ajax/article/' + id + '/',
            type: "GET",
            dataType: 'HTML'
        }).then(function(data) {
            if (data.length) {
                mod.appendArticle(data, $container);//<<< asynchronous insertion of content
            } else {
                return $.Deferred().reject(new Error("get article ajax output error"));
            }
        }).then(null, function(e) {
            $container.remove();//container will never be filled, so can be removed.
            console.error(e);
            return $.when(); // mark promise as "handled"
        });
    });
    return $.when.apply(null, promises);
};

mod.getArticles()现在向其调用者返回完成承诺，允许在必要时进一步链接。

Answer 6

而不是使用for循环。在上一个函数的响应中调用您的函数。

    //create a global variable
        var counter = 0;

        function yourFunc(){

        mod.getArticles = function( ){
            //mod.vars.ajaxCount could start at 0-2
            //mod.vars.pushIds is an array with the ids to be ajaxed in
                var id = mod.vars.pushIds[counter ];

                $.ajax({
                    url: '/ajax/article/' + id + '/',
                    type: "GET",
                    dataType: 'HTML',
                    error: function() {
                        console.error('get article ajax error');
                    }
                }).done( function( data ) {
                    if (data.length) {
                        mod.appendArticle( data );
                    } else {
                        console.error('get article ajax output error');
                    }
        //increment & check your loop condition here, so that your responses will be appended in same order
         counter++;
         if (counter < 3)
              { yourFunc(); }
                });

        };
        }

Answer 7

我遇到了同样的问题，我正在通过以下方式解决此问题。只需使用 async 来获取顺序响应

<script type="text/javascript">
var ajax1 =  $.ajax({
      async: false, 
      url: 'url',
      type: 'POST',
      data: {'Data'},
    })
.done(function(response) {
        console.log(response);
});

内部循环中的Ajax调用需要顺序响应

7 个答案: