等待 AJAX，然后继续通过单独的功能答案

【问题标题】：Wait for AJAX before continuing through separate function等待 AJAX，然后继续通过单独的功能
【发布时间】：2012-07-02 15:26:56
【问题描述】：

好的...凌晨 2 点，我在此划定界限。帮助... 在我的笔记本电脑最终走出窗外之前。 :)

我已经尝试过使用 setTimer、回调和其他我能想到的东西（当然还有其他一些 Stackoverflow 提示）。我已经剥离了所有内容，所以我只留下了基本代码。

我要做的是调用 parseRow() 并在它最后保存记录之前，我需要获取关联的类别（通过 AJAX）；但是，它会直接过去，因此类别始终是“未定义的”。

function parseRow(row){
    var rowArray     = row.trim().split(",");
    var date         = rowArray[0];
    var checknum     = rowArray[1];
    var payee        = rowArray[2];
    var memo         = rowArray[3];
    var amount       = rowArray[4];

    //ERROR: blows right past this one and sets the category variable BEFORE ajax returns
    var category = autoSelectCategory(payee);

    saveRecord(date, checkNum, payee, memo, category, payment, deposit);
}

function autoSelectCategory(payee) {
    var data;
    $.ajax({
        async: false,
        url: "autoselectcategory",
        dataType: "json",
        data: {
            string: payee
        },
        success: function (returnedData) {
            data = returnedData;
        }
    });
    return data;
}

【问题讨论】：

编辑：我添加了@freakish 的建议，他是为了回应 penartur 的回答，因为我是个白痴并且没有正确返回数据 - 这就是我熬夜太晚的结果。上面实际上现在可以解决问题。但是，我将实现回调。
你也可以做一件事。只需在 autoSelectCategory 中传递所有这些参数并成功执行 saveRecord，但我想更好的方法是回调函数。

标签： javascript codeigniter jquery

【解决方案1】：

AJAX 代表异步。这意味着在您的原始代码中，saveRecord 将在客户端接收来自服务器的响应之前执行（并且，根据 $.ajax 实现，它可能在客户端发送之前对服务器的请求）。

此外，您似乎误解了函数在 JS 中的工作方式。 var category = autoSelectCategory(payee); 会将类别设置为autoSelectCategory 的返回值；但是代码中的 autoSelectCategory 函数什么也不返回。

另一方面，你的匿名函数的data返回值只能被$.ajax函数使用（而$.ajax可能会忽略success参数返回值）。

下面是应该工作的代码：

function parseRow(row){
    var rowArray     = row.trim().split(",");
    var date         = rowArray[0];
    var checknum     = rowArray[1];
    var payee        = rowArray[2];
    var memo         = rowArray[3];
    var amount       = rowArray[4];

    autoSelectCategory(payee, function (category) {    
        saveRecord(date, checkNum, payee, memo, category, payment, deposit);
    });
}

function autoSelectCategory(payee, callback) {
    $.ajax({
        async: false,
        url: "autoselectcategory",
        dataType: "json",
        data: {
            string: payee
        },
        success: callback
    });
}

【讨论】：

既然他使用的是async: false，那么实际上saveRecord不会在$.ajax完成工作之前被执行。不过，他 is 返回值不正确。在$.ajax 之前定义var data;，将其设置为success 并在$.ajax 之后返回应该可以。尽管如此，使用async: false 是一种非常糟糕的做法。
@freakish 我应该注意到async: false。甚至不知道这是可能的:)
谢谢你们！正是我想要的！
异步已被弃用。使用怪异的答案。
Freakish 有更好的答案。 async: false 将阻止一切并阻止您的页面正常运行。

【解决方案2】：

不要使用async: false 选项。这是一个纯粹的邪恶（阻止浏览器甚至其他选项卡中的 all 脚本！）并且自 jQuery 1.8 起已被弃用。您应该像往常一样使用回调。

function parseRow(row) {
    /* the other code */
    autoSelectCategory(payee, function() {
        saveRecord(date, checkNum, payee, memo, category, payment, deposit);
    });
}

function autoSelectCategory(payee, callback) { // <---- note the additional arg
    $.ajax({
        url: "autoselectcategory",
        dataType: "json",
        data: {
            string: payee
        },
        success: function(res) {
            /* the other code */
            callback();
        }
    });
}

【讨论】：