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
})

该代码工作正常。现在我需要附加一个＃34;装载机＆＃34;这个Ajax调用。我知道我可以将此附加到$(document)，因为jQuery 1.8+ docs公开（在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

为什么不将加载脚本放入函数中，以便随意调用它们？这样它们就可以适应代码的逻辑，而不是每次都运行。

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

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

Answer 2

不使用全局事件处理程序，而是显示/隐藏当前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');
    })
}

在$ .post上切换加载器以便进行Ajax调用

2 个答案: