javascript - 在 Ajax 调用的 $.post 简写上切换加载程序

Question

我有以下代码用于进行 Ajax 调用:

$.post($form.attr('action'), $form.serialize(), 'json').done(function (data, textStatus, jqXHR) {
    // Some logic here for done callback

    // Redirect to another URL after 5 seconds
    window.setTimeout(function () {
        window.location = data.redirect_to;
    }, 5000);
}).fail(function () {
    // Some logic here for fail callback
})

该代码运行良好。现在我需要将一个“加载器”附加到此 Ajax 调用。我知道我可以将其附加到 $(document) 自 jQuery 1.8+ 文档公开以来(在 this 主题上也发现了相同的内容)，所以我做了以下操作:

$(function () {
  // a bunch of logic here
}).ajaxStart(function () {
    $('#loaderModal').modal('show');
    $('#loaderModal').on('show.bs.modal', function (e) {
        $('#loaderDiv').loader();
    })
}).ajaxStop(function () {
    $('#loaderModal').modal('hide');
    $('#loaderModal').on('hidden.bs.modal', function (e) {
        $('#loaderDiv').loader('destroy');
    })
});

这又有效，但碰巧我在页面上有其他 Ajax 调用(用于某些字段的验证目的)，并且每次运行其中任何一个时，都会显示加载程序，这是不正确的，因为我只需要附加到上面显示的代码(第一段代码)。我怎样才能做到这一点？

作为与本文相关的第二部分，done 和 fail 回调上的一些逻辑触发 Bootstrap Growl消息，您一定已经注意到，我正在使用包含加载程序的 Twitter Bootstrap Modal 组件，因此我担心运行加载程序的调用会以某种方式阻止 回调时的第二次调用done 被调用，这可能吗？这些事件的执行速度有多快？

PS:如果你们有更好的解决方案，请提前表示感谢

Answer 1

不要使用全局事件处理程序，而是显示/隐藏当前 ajax 请求的加载程序，例如

//show the loader before the request
showLoader();
$.post($form.attr('action'), $form.serialize(), 'json').done(function (data, textStatus, jqXHR) {
    // Some logic here for done callback

    // Redirect to another URL after 5 seconds
    window.setTimeout(function () {
        window.location = data.redirect_to;
    }, 5000);
}).fail(function () {
    // Some logic here for fail callback
}).always(hideLoader) //hide the loader after the ajax request

function showLoader() {
    $('#loaderModal').modal('show');
    $('#loaderModal').on('show.bs.modal', function (e) {
        $('#loaderDiv').loader();
    })
}

function hideLoader() {
    $('#loaderModal').modal('hide');
    $('#loaderModal').on('hidden.bs.modal', function (e) {
        $('#loaderDiv').loader('destroy');
    })
}