javascript - 在 ajax 调用完成后执行函数

Question

我想知道当带有 ajax 调用的函数完成时，哪种方式是执行函数的最佳方式。

我的代码:

   jQuery.when(AjaxCallToBokningar()).done(function () {

            console.log("AjaxCallComplete");
        });


    function AjaxCallToBokningar() {
    var url = `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/getbytitle('Bokningar')/items

    var call = jQuery.ajax({
        url: url,
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        }
    });

    //Done
    call.done(function (data, textStatus, jqXHR) {
        //Filling globalArray
        window.globalBokningsArray = data.d.results;
    });

    //Fail
    call.fail(function (jqXHR, textStatus, errorThrown) {
        console.log('Loading Bokningar content faild: ' + textStatus + jqXHR.responseText);
    });
}

我走在正确的轨道上还是有更好的方法？

Answer 1

如果您希望能够进行 Ajax 调用，然后在它完成时调用函数，您可以使用函数引用作为参数并像这样...

function AjaxCallToBokningar(doneCallback) {
    var url = `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/getbytitle('Bokningar')/items

    var call = jQuery.ajax({
        url: url,
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        }
    });

    //Done
    call.done(function (data, textStatus, jqXHR) {
        //Filling globalArray
        window.globalBokningsArray = data.d.results;
        doneCallback();
    });

    //Fail
    call.fail(function (jqXHR, textStatus, errorThrown) {
        console.log('Loading Bokningar content faild: ' + textStatus + jqXHR.responseText);
    });
}

然后你可以这样调用它......

function ajaxCallComplete1() {
    // this is executed after the 1st call is done - do something here 
}

function ajaxCallComplete2() {
    // this is executed after the 2nd call is done - do something here 
}

AjaxCallToBokningar(ajaxCallComplete1);
AjaxCallToBokningar(ajaxCallComplete2);

或者...

AjaxCallToBokningar(function() {
    // this is executed after the call is done - do something here 
});