用作回调时的 Javascript 函数触发顺序

Question

我创建了一个小的 fetch 函数，它基本上只是为我执行一个 ajax POST 以及为简洁起见我删除的其他一些东西。在这个函数中，我传递了一个回调，它应该在成功回调被命中时触发。

function ajax_fetch(url, fetch, data, callback) {     

    $.ajax({
        type: "Post",
        url: baseurl + url,
        data: data,
        contentType: "application/json",
        dataType: "html",
        success: function (response) {
            fetch.html(response);

            // if there's a callback, run it.
            if (typeof callback == "function")
                callback();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            handleErrors(xhr, ajaxOptions, thrownError);
        }
    });
}

下面我有一段代码，我基本上在其中执行 2 个 ajax 调用。第一个触发普通的 ajax POST，然后在成功后调用我上面的 ajax_fetch() 函数，一切都按预期工作。

$("#markstatus").singleBind("click", function () {
    var step = "{ step : " + $(this).data("step") + "}";

    $.ajax({
        type: "POST",
        url: baseurl + "SetStatus",
        data: step,
        contentType: "application/json",
        dataType: "html",
        success: function (result) {
            $("#header.container").html(result);
            ajax_fetch("/StepIndex", $(".replaceable"), step,
            function() {
                window.alerts.success("Step Complete");
            });              
        },
        error: function (xhr, ajaxOptions, thrownError) {
            handleErrors(xhr, ajaxOptions, thrownError);
        }
    });
});

问题是:

$("#removestatus").singleBind("click", function () {

    var step = "{ step : " + $(this).data("step") + "}";

    ajax_fetch("RemoveStatus", $("#header.container"), step,
        ajax_fetch("/StepIndex", $(".replaceable"), step,
        function () {
            window.alerts.warning("Step Re-Opened");
        })
    );
});

我想我可能会很狡猾，并通过最初使用我的 ajax_fetch() 函数进行基本相同的双重 ajax 调用，然后在另一个 ajax_fetch()< 中命中第一个回调传递 一切都应该很好，花花公子。

但是当我查看我的控制台输出时:

customSpa.js:793 Object {url: "/StepIndex", fetch: jQuery.fn.init[1], data: "{ step : 1}", callbackl: function}
customSpa.js:801 requesting: /async//StepIndex
customSpa.js:793 Object {url: "RemoveStatus", fetch: jQuery.fn.init[1], data: "{ step : 1}", callbackl: undefined}
customSpa.js:801 requesting: /async/RemoveStatus

我可以看到它首先调用内部提取，然后是外部提取。这是异步/ promise 类型的问题还是我到底做错了什么？

Answer 1

您正在尝试将函数作为回调传递(稍后调用)，但您传递的是立即调用函数的结果。

你需要这样写调用:

ajax_fetch("RemoveStatus", $("#header.container"), step,
    function() {
        ajax_fetch("/StepIndex", $(".replaceable"), step,
        function () {
            window.alerts.warning("Step Re-Opened");
        })
    }
);

...这不足为奇。内部回调是一个函数；外部回调也必须是一个函数。