等待jQuery AJAX调用完成

Question

我有一个上传按钮，单击时会调用ajax函数来上传文档。该函数运行后，我将调用另一个ajax函数以刷新屏幕上显示我所有文档的表格。我一直在看这个问题-Wait until all jQuery Ajax requests are done?

这似乎是我所需要的。但是我不确定如何为当前代码实现。我有：

$("#UploadButton").on('click', function () {
           doUpload(); // My First AJAX function
           refreshTable(); // My Second AJAX Function
       }); 

我的doUpload AJAX功能如下：

function doUpload() {
        $.ajax({
            url: 'myupload url',
            type: 'POST',
            data: new FormData($('#uploadForm')[0]),
            processData: false,
            contentType: false,
            success: function () {
                $.growlUI('Document Uploaded Sucessfully');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status + " " + thrownError);
            }
        });
    }

然后我的refreshTable ajax函数是：

function refreshTable() {
    $.ajax({
        url: 'url to get all files',
        type: 'GET',
        data: $('#searchForm').serialize(),
        success: function (data) { populateTable(data); },
        error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status + " " + thrownError); }
    });
    return false;
}

如果使用当前解决方案上载文档，则refreshTable的成功功能似乎被击中过快，并且没有找到最新上传的文件。我曾尝试在refreshTable()的成功函数中以5秒的doUpload来添加对setTimeout的调用，有时这可以正常工作并刷新表，但其他时候却没有上传表。

然后，我将按钮上的点击处理程序更改为以下选项，以尝试具有我上面链接的其他StackOverflow答案所具有的功能，但这也不起作用

$("#UploadButton").on('click', function () {
            $.when(doUpload()).done(function() {
               refreshTable();                
             });
        }); 

Answer 1

您可以使用回调机制。

function doUpload(callback) {
    $.ajax({ //some parameters
        success: function (data) {
            //do some work here
            callback();
        }
    );
}

然后您可以将函数链称为：

doUpload(refreshTable);

Answer 2

编辑：@qamyoncu的回答比我的要好。

在AJAX中，调用是异步完成的。这就是为什么您得不到想要的东西。

这里是一种避免您遇到问题的棘手解决方案：

function doUpload(init) {
        var res = null;
        var _init = init || false;

        if (!_init) {
            _init = true;
            $.ajax({
                /// ajax call for doUpload()...
            });
        }

        if (res == null) {
            setTimeout(function(){ doUpload(_init); }, 100);
        } else {
            refreshTable();
        }
    }