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

Question

I need to make 3 or less ajax calls, and the responses need to be appended to the dom in the same order they were requested.

I have the following function, but the problem is that the responses that I get are not necessarily in the correct order when they get appended to the dom.

I wouldn't want to use the async: false property because it blocks the UI and it's a performance hit of course.

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

You need to append the article to a certain position, based on for example the i variable you have. Or you could wait for all of the requests and then append them in order. Something like this:

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

Here is an example using i to append them in the proper order when they all finish loading:

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

Check this for more reference. This is still async, but it waits for all of them to complete. You know the order of invocation already, as its done through your code, so add the dom elements accordingly.

Answer 4

Try utilizing items within mod.vars array as indexes; to set as id property of $.ajaxSettings , set returned data at this.id index within an array of responses. results array should be in same order as mod.vars values when all requests completed.

var mod = {
    "vars": [0, 1, 2]
};

mod.getArticles = function () {
    var results = [];
    var ids = this.vars;
    var request = function request(id) {
            return $.ajax({
                type: "GET",
                url: "/ajax/article/" + id + "/",
                // set `id` at `$.ajaxSettings` ,
                // available at returned `jqxhr` object
                id: id  
            })
            .then(function (data, textStatus, jqxhr) {
                // insert response `data` at `id` index within `results` array
                console.log(data); // `data` returned unordered
                // set `data` at `id` index within `results
                results[this.id] = data;
                return results[this.id]
            }, function (jqxhr, textStatus, errorThrown) {
                console.log("get article ajax error", errorThrown);
                return jqxhr
            });
    };

    return $.when.apply(this, $.map(ids, function (id) {
        return request(id)
    }))
    .then(function () {
        $.map(arguments, function (value, key) {
            if (value.length) {
                // append `value`:`data` returned by `$.ajax()`,
                // in order set by `mod.vars` items:`id` item at `request`
                mod.appendArticle(value);
            } else {
                console.error("get article ajax output error");
            };
        })
    });

};

mod.getArticles();

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

Answer 5

Solutions that rely solely on closures will work up to a point. They will consistently append the articles of a single mod.getArticles() call in the correct order. But consider a second call before the first is fully satisfied. Due to asynchronism of the process, the second call's set of articles could conceivably be appended before the first.

A better solution would guarantee that even a rapid fire sequence of mod.getArticles() calls would :

• append each call's articles in the right order
• append all sets of articles in the right order

One approach to this is, for each article :

• synchronously append a container (a div) to the DOM and keep a reference to it
• asynchronously populate the container with content when it arrives.

To achieve this, you will need to modify mod.appendArticle() to accept a second parameter - a reference to a container element.

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

For convenience, you may also choose to create a new method, mod.appendArticleContainer() , which creates a div, appends it to the DOM and returns a reference to it.

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

Now, mod.getArticles() is still very simple :

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() now returns a promise of completion to its caller, allowing further chaining if necessary.

Answer 6

Instead of using a for loop. Call your function in response part of previous function.

    //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

I'm faced same problem i'm solve this problem using following way. just use async for get sequence wise response

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