避免在jQuery中使用async:false的策略? [英] Tactics to avoid using async:false with jQuery?

问题描述

jQuery文档强烈建议您不要在以下情况下将async设置为false执行$.ajax请求.

The jQuery docs strongly urge you not to set async to false when performing an $.ajax request.

但是，我看到了常见的被鞭打推荐.

However, I'm seeing common solutions to synchronicity problems involve doing just this. And then I've seen people been chastised for going against the docs' recommendation.

话虽如此，我尝试使用 promise 避免将async:false与没有运气.

With that said, I have attempted to use a promise to avoid using async:false with no luck.

这是我正在使用的代码.我有一个调用addToOrder:

Here is the code I'm using. I have an onclick event that calls 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);
                }
            }
        });
    }
}

issaved始终将其评估为false，因为在saveTemplate有时间运行之前对其进行评估.我发现的唯一解决方案是设置async:false，但是我正在采取我已经看到的严重警告，并且宁愿不这样做.还有什么其他解决方案?

issaved will always evaluate to false, as it is being evaluated before saveTemplate has had time to run. The only solution I have found is to set async:false but I am taking the warnings I've seen serious and would rather not. What other solutions are there?

推荐答案

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

Tactics to avoid using async:false with jQuery?

学会喜欢回调. :-)当人们这样做时:

Learn to love callbacks. :-) When people do this:

// 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 event-driven, asynchronous way really isn't that much different:

// 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的方式)，因此我博客中的这篇文章可能会有所帮助:

Since callbacks frequently involve closures (the above ones do, that's how we're accessing x and bar), this article from my blog may be helpful: Closures are not complicated

这篇关于避免在jQuery中使用async:false的策略?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！