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

Posted 2023-05-08

【中文标题】等待 AJAX，然后继续通过单独的功能

【英文标题】：Wait for AJAX before continuing through separate function

【发布时间】：2012-07-02 15:26:56

【问题描述】：

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

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

我要做的是调用 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，但我想更好的方法是回调函数。

【参考方案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();
        
    );