Question

我有一些代码可以将部分字符分成几部分，然后向php请求（foreach部分）获取结果并将它们放在元素中。当我使用async时，一切正常：false但我希望它是async：true。我对async的问题是：true是结果是＆＃34; random＆＃34;因为请求没有顺序...我已经阅读并搜索了如何解决这个问题但却无法找到它...

这是我的代码：

$(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

异步执行无法保证执行顺序。由此得名。如果您想要同步，请使用async: false。 jQuery docs

或者，如果您想要获得异步执行的优势（如速度），请使用解决方案重新排列数据或使用一些其他参数按所需顺序定位数据。

一个这样的实现逻辑的示例是：

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

Ajax顺序结果

1 个答案: