如何等待 jQuery ajax 请求在循环中完成?

IT技术 javascript jquery ajax
2021-01-19 16:47:31

我有那个代码:

for (var i = 0; i < $total_files; i++) {
  $.ajax({
    type: 'POST',
    url: 'uploading.php',
    context: $(this),
    dataType: 'json',
    cache: false,
    contentType: false,
    processData: false,
    data: data_string,
    success: function(datas) {
      //does something
    },
    error: function(e) {
      alert('error, try again');
    }
  });
}

它上传图像非常好,但问题是我找不到一种方法来一张一张上传图像,我试图将选项async 设置为 false但它会冻结 Web 浏览器,直到所有图像都上传完毕,这不是我想要的想要,我想以某种方式模拟这个“async:false”选项来执行相同的操作,但不会冻结网络浏览器。

这个怎么做 ?

5个回答

您可以创建一系列Promise,以便在所有Promise都得到解决后,您就可以运行您的all done代码。

var promises = [];
for (var i = 0; i < $total_files; i++){ 
   /* $.ajax returns a promise*/      
   var request = $.ajax({
        /* your ajax config*/
   })

   promises.push( request);
}

$.when.apply(null, promises).done(function(){
   alert('All done')
})

DEMO

如果找不到答案,@failed.down 最好提出一个新问题
2021-03-19 16:47:31
没关系,我找到了,我只是使用 ajax 而不是 get 并用 json 替换 jsonp 并async:false在 ajax 选项中使用
2021-03-25 16:47:31
你的done语法正确吗?...好吧,我没有看到你的编辑,但现在
2021-03-26 16:47:31
我看了你的演示,虽然最后它叫“全部完成”,但执行的顺序是混乱的。有什么办法可以纠正这个问题吗?
2021-04-02 16:47:31
这很有帮助,但如果任何 ajax 调用失败, .done 函数将不会执行
2021-04-07 16:47:31

每次调用都填充一个数组,并在前一个完成后调用下一个项目。

你可以尝试这样的事情:

    window.syncUpload = {

        queue : [],

        upload : function(imagesCount) {

            var $total_files = imagesCount, data_string = "";

            /* Populates queue array with all ajax calls you are going to need */
            for (var i=0; i < $total_files; i++) {       
                this.queue.push({
                    type: 'POST',
                    url: 'uploading.php',
                    context: $(this),
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: data_string,
                    success: function(datas) {
                    //does something
                    },
                    error: function(e){
                        alert('error, try again');
                    },
                    /* When the ajax finished it'll fire the complete event, so we
                       call the next image to be uploaded.
                    */
                    complete : function() {
                        this[0].uploadNext();
                    }
                });
            }

            this.uploadNext();
        },

        uploadNext : function() {
            var queue = this.queue;

            /* If there's something left in the array, send it */
            if (queue.length > 0) {
                /* Create ajax call and remove item from array */
                $.ajax(queue.shift(0));
            }


        }

    }

只需使用syncUpload.upload(NUMBER_OF_IMAGES) 调用它;

你试过这个代码吗?它将按照您创建队列数组的顺序加载图像。
2021-03-25 16:47:31

对于支持 native 的 jQuery 3.x+ 和现代浏览器PromisePromise.all可以这样使用:

var promises = [];
for (var i = 0; i < $total_files; i++) {
   // jQuery returns a prom 
   promises.push($.ajax({
      /* your ajax config*/
   }))
}

Promise.all(promises)
.then(responseList => {
   console.dir(responseList)
})

如果您的文件已经存储在列表中,那么您可以使用map而不是循环。

var fileList = [/*... list of files ...*/];

Promise.all(fileList.map(file => $.ajax({
      /* your ajax config*/
})))
.then(responseList => {
   console.dir(responseList)
})

我会尝试jQuery.when以便您仍然可以使用异步调用但延迟,例如:

jQuery(document).ready(function ($) {
    $.when(
        //for (var i = 0; i < $total_files; i++) {
            $.ajax({
                // ajax code
            })
        //}
    ).done(function () {
        // perform after ajax loop is done
    }); 
}); // ready

编辑:ajax 迭代应该在外面完成,$.when并按照charlietfl的回答的建议推入一个数组中您可以使用(异步)ajax 调用并将其推迟到内部$.when,请参阅JSFIDDLE

实际上,我不会删除我的答案,因为讨论可能对未来的访问者有用;)
2021-03-19 16:47:31
您忘记在for循环周围放置一个函数是不是$.when期待一个Promise或一系列Promise?
2021-03-22 16:47:31
@t.niese :顺便说一句,您可以在$.when没有array...的情况下在内部使用ajax调用...这里是charlietfl的调整过的jsfiddle ...当然,对于单个ajax调用工作正常
2021-03-25 16:47:31
我写得很快,但我想你应该去找charlietfl的答案(我会删除这个)
2021-04-06 16:47:31
我得到“语法错误:丢失:在属性 id 之后 (var i=0; i<$total_files; i++) {”
2021-04-08 16:47:31

在 jquery 的一个语句中

$.when.apply(null, $.map(/*input Array|jQuery*/, function (n, i) {
   return $.get(/* URL */, function (data) {
     /* Do something */
   });
})).done(function () {
  /* Called after all ajax is done  */
});