jQuery 什么时候完成答案

【问题标题】：jQuery When Then DonejQuery 什么时候完成
【发布时间】：2016-06-09 18:23:22
【问题描述】：

我正在尝试验证对数据库的两次调用中的一个字段。它进入数据库并验证它的真假。我需要链接一些 AJAX 调用来执行此操作。我正在使用.when、.then 和.done 来执行此操作，但它似乎不起作用。

var Validate = function () {
        var isValid = true;
        $errorList.find('li').remove();
        $lblAError.text('');

        $.when(ParcelValidate(isValid))
            .then(AccountValidate(isValid))
            .done(function () {
            return isValid
        });
    };

    var ParcelValidate = function (isValid) {
        return $.ajax({
            url: "../WebServices/ParcelMasterWebService.asmx/IsParcelActive",
            method: "POST",
            data: JSON.stringify({ "pin": $parcID.val() }),
            contentType: 'application/json; charset=utf-8',
            datatype: 'json',
            success: function (data) {
                if (!data.d) {
                    isValid = false;
                    $lblPError.text('!').css(({ "color": "red" }));
                    $errorList.append('<li>Parcel must be on record.</li>').css(({ "color": "red" }));
                }
            },
            fail: function () {
                isValid = false;
                $lblPError.text('!').css(({ "color": "red" }));
                $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
            }
        })
    }
    var AccountValidate = function (isValid) {
        return $.ajax({
            url: "../WebServices/FireProtectMasterWebService.asmx/isAccountActive",
            method: "POST",
            data: JSON.stringify({ "accountID": $parcID.val() }),
            contentType: 'application/json; charset=utf-8',
            datatype: 'json',
            success: function (data) {
                if (data.d) {
                    isValid = false;
                    $lblPError.text('!').css(({ "color": "red" }));
                    $errorList.append('<li>Cannot have duplicate Parcels.</li>').css(({ "color": "red" }));
                }
            },
            fail: function () {
                isValid = false;
                $lblPError.text('!').css(({ "color": "red" }));
                $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
            }
        })
    }

【问题讨论】：

你会定义“似乎没有工作吗？”您期望会发生什么，会发生什么，以及您尝试过什么来解决它？您看到了哪些错误消息？
我需要它来运行一个 ajax 调用然后下一个。只有在那些完成并运行成功或失败部分之后，我才希望它返回 isValid 给我。现在它开始了 ajax 调用，然后继续前进并返回 undefined，然后调用又回来了，没有任何东西可以返回。

标签： jquery ajax .when

【解决方案1】：

你有几个问题，第一个是验证函数没有返回任何东西，因为你正在异步调用你的函数应该返回一个承诺，而不是返回一个布尔值，最好拒绝/resolve 这个promise，你的代码应该是这样的：

var Validate = function () {
    $errorList.find('li').remove();
    $lblAError.text('');
    var promise = $.Deferred();

    ParcelValidate(promise).then(AccountValidate(promise));

    return promise;
};

var ParcelValidate = function (promise) {
    return $.ajax({
        url: "../WebServices/ParcelMasterWebService.asmx/IsParcelActive",
        method: "POST",
        data: JSON.stringify({ "pin": $parcID.val() }),
        contentType: 'application/json; charset=utf-8',
        datatype: 'json',
        success: function (data) {
            if (!data.d) {
                $lblPError.text('!').css(({ "color": "red" }));
                $errorList.append('<li>Parcel must be on record.</li>').css(({ "color": "red" }));
                promise.reject(false);
            }
        },
        fail: function () {
            $lblPError.text('!').css(({ "color": "red" }));
            $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
            promise.reject(false);
        }
    })
}
var AccountValidate = function (promise) {
    return $.ajax({
        url: "../WebServices/FireProtectMasterWebService.asmx/isAccountActive",
        method: "POST",
        data: JSON.stringify({ "accountID": $parcID.val() }),
        contentType: 'application/json; charset=utf-8',
        datatype: 'json',
        success: function (data) {
            if (data.d) {
                $lblPError.text('!').css(({ "color": "red" }));
                $errorList.append('<li>Cannot have duplicate Parcels.</li>').css(({ "color": "red" }));
                promise.reject(false);
            }
            promise.resolve(true);
        },
        fail: function () {
            $lblPError.text('!').css(({ "color": "red" }));
            $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
            promise.reject(false);
        }
    })
}

现在调用 validate 的任何东西都应该等待 promise 并对 done/fail 方法做出相应的反应，即：

Validate().done(function(){/*valid*/}).fail(function(){/*not valid*/})

最后一件事，因为它现在是您的代码，因为您将 isValid 作为参数传递，更改值不会修改原始函数的 isValid 值。

【讨论】：

抱歉，我不太擅长这些东西。我已经按照您放下的内容进行了几次循环，但它仍然在 ajax 完成之前返回。现在它只返回 true 而不是 undefined。 $insert.click(function () { var isValid; if ($parcID.val() != "") { Validate().done(function (data) { return data }).fail(function () { return false }) } }); 这就是我所说的。不知道我错在哪里
哪个 ajax 调用没有等待？
两者都只是运行函数并直接返回给调用者而不等待任何响应。
请记住，所有这些函数都是基于 Promise 的并且它们是异步的，因此它们将直接返回给调用者，但最终会触发完成/失败函数。基本上，您需要将所有调用者逻辑放在完成/失败函数中，如果您需要根据调用者的此调用返回一个值，那么调用者还必须返回一个将被解决的承诺。你能更新一下你现在的问题吗？你是怎么称呼它的？调用后的逻辑是什么？

【解决方案2】：

我想解决的问题是，如果我从一个 ajax 调用中得到 true 或从另一个 ajax 调用中得到 false，我想拒绝点击事件。我遇到的问题是它会运行所有这些并返回到启动它的事件，一旦我从服务器得到答案，它就会达到我的回报，但不会回到事件。即使我得到的答案是错误的，该事件也会以 true 值结束并运行我的其他代码部分。

为了解决这个问题，我为他们添加了另一个按钮来单击隐藏 asp 控件并让新按钮运行验证。当我从 ajax 得到答案时，我验证返回的内容并告诉 JavaScript 单击 asp 控件来触发事件。不是最优雅或最恰当的方式，但它确实有效。

var Validate = function (Filter) {
    $errorList.find('li').remove();
    $lblAError.text('');
    var promise = $.Deferred();
    var hdnbtn = document.getElementById('btnInsert');

    $.when(ParcelValidate()).then(function (data) {
        if (data.d) {
            $.when(AccountValidate()).then(function (data2) {
                if (data2.d) {
                    $lblPError.text('!').css(({ "color": "red" }));
                    $errorList.append('<li>Cannot have duplicate Parcels.</li>').css(({ "color": "red" }));
                } else {
                    hdnbtn.click();
                }
            })
        }
        else {
                $lblPError.text('!').css(({ "color": "red" }));
                $errorList.append('<li>Parcel must be on record.</li>').css(({ "color": "red" }));
            }
    })
};

var ParcelValidate = function () {
    return $.ajax({
        url: "../WebServices/ParcelMasterWebService.asmx/IsParcelActive",
        method: "POST",
        data: JSON.stringify({ "pin": $parcID.val() }),
        contentType: 'application/json; charset=utf-8',
        datatype: 'json',            
        fail: function () {
            $lblPError.text('!').css(({ "color": "red" }));
            $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));
            //promise.fail(false);
        }
    })
};
var AccountValidate = function () {
   return  $.ajax({
        url: "../WebServices/FireProtectMasterWebService.asmx/isAccountActive",
        method: "POST",
        data: JSON.stringify({ "accountID": $parcID.val() }),
        contentType: 'application/json; charset=utf-8',
        datatype: 'json',
        fail: function () {
            $lblPError.text('!').css(({ "color": "red" }));
            $errorList.append('<li>Unexpected error occured!</li>').css(({ "color": "red" }));                
        }
    })
}

【讨论】：