CODEWITHSUNDEEP
jqueryajax
scorpio1441
scorpio1441

Reputation: 3088

Delay ajaxStart for n seconds

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() {
                ...................
        }
    });
});

Upvotes: 1

Views: 1323

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 3

Related Questions