Question

我一直试图通过两次Ajax调用完成此操作。我想在前两个完全完成时执行另一个Ajax调用。但是，当我打电话给前两个时，第三个也正在执行。以下是我的代码。

/**
 * Triggers all the partners to search for offers.
 */

function PREQUAL_OFFERS() {
    var hughes = HUGHES();
    var ctl = CTL();

    $.when(hughes, ctl).then(function () {
        ENGINE_OFFERS(); // Executes after all previous Ajax calls are done.
    });
}

function ATT() {}

function HUGHES() {
    console.log("Initialized hughes()");
    var data = $("#searchPackages").serialize();
    var requestOffers = $.ajax({
            url : "/isgov3/index.php/HUGHES/ajax/PreQual",
            type : "POST",
            dataType : "html",
            cache : false,
            data : data,
    });
    requestOffers.success(function (data) {});
    requestOffers.fail(function (jqXHR, error, errorThrown) {});
}

function CTL() {
    console.log("Initialized CTL()");
    var data = $("#searchPackages").serialize();
    var requestOffers = $.ajax({
            url : "/isgov3/index.php/CTL/ajax/PreQual",
            type : "POST",
            dataType : "html",
            cache : false,
            data : data,
    });
    requestOffers.success(function (data) {});
    requestOffers.fail(function (jqXHR, error, errorThrown) {});
}

function ENGINE_OFFERS() {
    console.log("Called Engine");
    var Offers = $.get({
            url : "/isgov3/index.php/ENGINE/engine",
            dataType : "html",
            cache : false,
    });

    Offers.success(function (data) {
        $("#MyTab-Menu_tab_12").html(data);
    });
    Offers.fail(function (jqXHR, error, errorThrown) {});
}

Answer 1

HUGHES()和CTL()都必须return $.when()使用延迟/承诺，例如jqXHR提供的$.ajax() }：

function HUGHES(callback) {
    // ...
    var requestOffers = $.ajax({ ... });

    // ...
    return requestOffers;
}

function CTL(callback) {
    // ...

    return requestOffers;
}

在任一函数中都没有return语句，var hughes和var ctrl都被分配undefined，$.when()视为立即解决/成功值：

$.when(undefined, undefined).then(function () {
    console.log(arguments); // { 0: undefined, 1: undefined }
});

Answer 2

你可以为每个人创建一个回调函数，这样某些东西会在执行之前等待其他东西完成。因此，在这种情况下，只有在HUGHES和CTL已经完成的情况下才会执行ENGINE_OFFERS。

function PREQUAL_OFFERS() {

    HUGHES(function(data) {
        CTL(function(data) {
            ENGINE_OFFERS();
        });
    });
}

function ATT() {}

function HUGHES(callback) {
    console.log("Initialized hughes()");
    var data = $("#searchPackages").serialize();
    var requestOffers = $.ajax({
            url : "/isgov3/index.php/HUGHES/ajax/PreQual",
            type : "POST",
            dataType : "html",
            cache : false,
            data : data,
        });

    requestOffers.success(function (data) { callback(data); });

    requestOffers.fail(function (jqXHR, error, errorThrown) { callback(error); });

}

function CTL(callback) {
    console.log("Initialized CTL()");
    var data = $("#searchPackages").serialize();
    var requestOffers = $.ajax({
            url : "/isgov3/index.php/CTL/ajax/PreQual",
            type : "POST",
            dataType : "html",
            cache : false,
            data : data,
        });

    requestOffers.success(function (data) { callback(data); });

    requestOffers.fail(function (jqXHR, error, errorThrown) { callback(data); });
}

function ENGINE_OFFERS() {
    console.log("Called Engine");
    var Offers = $.get({
            url : "/isgov3/index.php/ENGINE/engine",
            dataType : "html",
            cache : false,
        });

    Offers.success(function (data) {

        $("#MyTab-Menu_tab_12").html(data);

    });

    Offers.fail(function (jqXHR, error, errorThrown) {});

如何在使用jQuery完成所有Ajax请求后执行操作

2 个答案: