Ajax顺序结果

Question

I've got a bit of code to divide a string of words in parts and do a request (foreach part) to php to get results and place them in element. All works fine when I use async : false BUT I would like it to be be async : true. The problem I have with async : true is that the results are "random" because request doesn't goes sequential... I've read and searched how to solve this but couldn't find it...

Here's my code:

$(function() {
$("#check").on( "click", function() {
    $("#results").empty();
    var text = $("#original").val();
    var totalWords = text.split(' ').length;
    var start = 0;
    var numberResults = 10;
    var divide = totalWords / numberResults;
    var numberOfTimes = Math.floor(divide) + 1;
    var test = 0;
    for(var index = 0; test < totalWords; index+=10){
        var part = text.split(/\s+/).slice((test),(test + 10)).join(" ");           
        $.ajax({
          url: "requests.php",
          async : true,
          cache: false,
          type: "POST",
          data: {words : part},           
          success: function(html){
            $("#results").append(html);
            $("#check").hide();         
          }
        });
        console.log(test);
        test = test + 10;   
        $(".progress-bar").attr("aria-valuenow", test);
        $(".progress-bar").css({"min-width" : test + "em"});
        $(".progress-bar").css({"width" : test + "%"});
        $(".progress-bar").text(test + "%");
        console.log(part);
    }   
}); 
});

Answer 1

Asynchronous Execution cannot guaranty order of execution. Hence the name. If you want synchronous as you mentioned use async: false. jQuery docs

Alternatively, use a solution to rearrange the data or use some additional parameter to position the data in your required order if you want to reap the advantages of async execution such as speed.

Example of one such implementation logic is:

$(function() {
    $("#check").on("click", function() {
        $("#results").empty();
        var text = $("#original").val();
        var totalWords = text.split(' ').length;
        var start = 0;
        var numberResults = 10;
        var divide = totalWords / numberResults;
        var numberOfTimes = Math.floor(divide) + 1;
        var test = 0;

        function action_task(index, data) {
            $.ajax({
                url: "requests.php",
                async: true,
                cache: false,
                type: "POST",
                data: data,
                success: function(html) {
                    //add data at reserved spot
                    $("#id_" + index).html(html);
                    $("#check").hide();
                }
            });
        }
        for (var index = 0; test < totalWords; index += 10) {
            var part = text.split(/\s+/).slice((test), (test + 10)).join(" ");
            //reserving a spot
            $("#results").append("<span id='id_" + index + "'></span>");
            action_task(index, {
                words: part
            });
            console.log(test);
            test = test + 10;
            $(".progress-bar").attr("aria-valuenow", test);
            $(".progress-bar").css({
                "min-width": test + "em"
            });
            $(".progress-bar").css({
                "width": test + "%"
            });
            $(".progress-bar").text(test + "%");
            console.log(part);
        }
    });
});