将ajaxStart延迟n秒

Question

How to delay the ajaxStart() or ajaxStop() for n seconds, so everyone can see my animated gif. Otherwise it goes away too quickly. Please advise. Thanks.

$(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

You can use a timeout to do that

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