避免在jQuery中使用async:false的策略？

强烈建议您在执行

$.ajax

请求时不要将

async

设置为

false

然而，我发现同步性问题的共同点就是这样。然后我看到人们反对医生的建议

尽管如此，我还是尝试使用a来避免使用

async:false

，但运气不好

这是我正在使用的代码。我有一个onclick事件调用

addToOrder

：

function saveTemplate() {
    var formData = getFormData();
    return $.ajax({
        type: "POST",
        url: "/p/session/save/" + sessionid + "/template/<?php echo $templateID ?>/",
        data: formData,
        async: true,
        success: function(msg){
            var rsp = $.parseJSON(msg);
            if (rsp.response === 'Saved') {
                sessionid = rsp.sessionid;
                $("#save-preview-data-response").html("&nbsp;&nbsp;&nbsp;" + rsp.response).fadeIn(100).delay(1000).fadeOut(1000);
            } else {
                $("#save-preview-data-response").css('color','#ff0000').html("&nbsp;&nbsp;&nbsp;" + rsp.response).fadeIn(100).delay(1000).fadeOut(1000);
            }
        }
    });
}

function addToOrder() {
    var saved = saveTemplate();
    var issaved;
    saved.success(function(e) {
        var rsp = $.parseJSON(e);
        issaved = (rsp.response == 'Saved') ? true : false;
    });
    if(issaved) {
        $.ajax({
            type: "POST",
            url: "<?php echo $baseURL; ?>addToOrder/respond/json",
            data: "sid=" + sessionid,
            async: true,
            success: function(msg){
                var rsp = $.parseJSON(msg);
                if (rsp.response === 'Saved') {
                    alert(msg);
                }
            }
        });
    }
}

函数saveTemplate（）{
var formData=getFormData（）；
返回$.ajax({
类型：“POST”，
url:“/p/session/save/”+sessionid+“/template/”，
数据：formData，
async:true，
成功：功能（msg）{
var rsp=$.parseJSON（msg）；
如果（rsp.response==‘已保存’）{
sessionid=rsp.sessionid；
$（“#保存预览数据响应”）.html（“+rsp.response）.fadeIn（100）.delay（1000）.fadeOut（1000）；
}否则{
$（“#保存预览数据响应”）.css（'color'，'#ff0000'）.html（“+rsp.response”）.fadeIn（100）.delay（1000）.fadeOut（1000）；
}
}
});
}
函数addToOrder（）{
var saved=saveTemplate（）；
var被保存；
已保存。成功（功能（e）{
var rsp=$.parseJSON（e）；
issaved=（rsp.response='Saved'）？真：假；
});
如果（已保存）{
$.ajax({
类型：“POST”，
url:“addToOrder/respond/json”，
数据：“sid=“+sessionid，
async:true，
成功：功能（msg）{
var rsp=$.parseJSON（msg）；
如果（rsp.response==‘已保存’）{
警报（msg）；
}
}
});
}
}

issaved

将始终计算为false，因为它是在

saveTemplate

有时间运行之前进行计算的。我找到的唯一解决方案是设置

async:false

，但我认为我看到的警告是严重的，我宁愿不要。还有其他解决方案吗？

将第二个.ajax（）调用放在第一个.success（）函数的内部

避免在jQuery中使用async:false的策略

学会爱回拨。：-）当人们这样做时：

// The synchronous way
function doSomething() {
    var foo;
    $.ajax({
        url: "/the/url",
        async: false,
        success: function(response) {
            foo = response.foo;
        }
    });
    return foo;
}

// ...somewhere else, we use it
function flurgle() {
    var bar = /* go get `bar` from somewhere */;
    var x = 52;

    if (doSomething() === bar) {
        x -= 10;
    }
    niftyFunctionUsing(x);
}

…事件驱动的异步方式实际上没有太大区别：

// The asynchronous way
function doSomething(callback) {
    $.ajax({
        url: "/the/url",
        success: function(response) {
            callback(response.foo);
        }
    });
}

// ...somewhere else, we use it
function flurgle() {
    var bar = /* go get `bar` from somewhere */;
    var x = 52;

    doSomething(function(foo) {
        if (foo === bar) {
            x -= 10;
        }
        niftyFunctionUsing(x);
    });
}

---

由于回调经常涉及闭包（上面的回调确实涉及闭包，这就是我们访问

x

和

bar

的方式），我博客中的这篇文章可能会有所帮助：

您可以更改SaveTemplate函数以接受一个参数，该参数是在save上运行的函数。然后，在addToOrder函数中，您可以使用其中的代码生成一个匿名函数，也可以进行重构，使大部分代码位于另一个可以按名称传递的函数中

---

其思想是，使用异步代码，当您进行异步调用时，您将停止处理该问题（即保存代码），并在回调中开始运行。在异步调用之后，您可以继续执行不相关的操作（例如向用户发送消息，说“请稍候”）但是，与保存相关的任何其他代码都必须位于由ajax配置的success属性中的回调集触发的函数中。

saveTemplate

在其他地方使用，而不仅仅与

addToOrder

（例如，我的应用程序中的用户可以随时保存他们的进度，这会调用

saveTemplate

——但是，当他们提交他们的“订单”时，我会最后保存一次他们的工作，然后继续将他们的模板添加到订单中。不是main.success（），而是

.addToOrder（）

中的一个，其中还有

issaved=（rsp.response=='Saved'）？真：假；

。是的，这就是我想说的。不过，你在编写代码方面打败了我。我几乎没有注意到你的做法，因为在第二个示例中，你的做法是接受回调函数。；-）很好的解释和回答。谢谢：）神奇的回答！甚至在8年前，我向你致敬