jquery - 延迟 ajaxStart n 秒

Question

如何将 ajaxStart() 或 ajaxStop() 延迟 n 秒，以便每个人都可以看到我的动画 gif。否则它消失得太快了。请指教。谢谢。

$(document).ajaxStart(function() {
    $('#container').append("<div class='progress'></div>");//
}).ajaxStop(function(){
    $('.progress').remove();
});

.progress {
    position: fixed;
    top: 35%;
    left: 45%;
    width: 50%;
    height: 50%;
    background-image: url('/images/progress.gif');
    background-repeat: no-repeat;
    background-size: 10%;
    z-index: 9999;
}

$('#settings-commit').click(function(event) {
    event.preventDefault();

    $.ajax({
        type    : 'POST',
        url : ..............,
        data    : { ............ },
        dataType: 'json',
        success : function(data) {
            if (data.status == 'ok') {
                ...................
            } else {
                ...................
            }
        },
        error   : function() {
                ...................
        }
    });
});

Answer 1

您可以使用超时来做到这一点

var progressTimer;
$(document).ajaxStart(function () {
    $('#container').append("<div class='progress'></div>");
    //if a new ajax request is started then don't remove the progress icon
    clearTimeout(progressTimer);
}).ajaxStop(function () {
    progressTimer = setTimeout(function () {
        $('.progress').remove();
    }, 1000)
});