Upon initiating ajax request, I want to trigger an overlay ONLY if it takes more than 2 seconds.
My goal is to only trigger the overlay after 2 seconds, and only if the ajax request has not completed.
The following works.
Once it fires off an ajax request, it waits 2 seconds. If there is still an active ajax request, it triggers an overlay with a 'waiting' gif. Once ajax requests are done, it hides the overlay.
However, the logic is based on ANY active ajax requests. How can I write this to only fire for a specific request? This code is vulnerable to other background ajax requests that I don't want firing an overlay. I need this to only work for specific ajax requests. For instance, if I have an ajax request that fires in the background, but isn't critical to the UI experience, I don't want it triggering the overlay.
My goal is to only trigger the overlay after 2 seconds, and only if the ajax request has not completed.
The following works.
Once it fires off an ajax request, it waits 2 seconds. If there is still an active ajax request, it triggers an overlay with a 'waiting' gif. Once ajax requests are done, it hides the overlay.
However, the logic is based on ANY active ajax requests. How can I write this to only fire for a specific request? This code is vulnerable to other background ajax requests that I don't want firing an overlay. I need this to only work for specific ajax requests. For instance, if I have an ajax request that fires in the background, but isn't critical to the UI experience, I don't want it triggering the overlay.
Code:
$(document).on({
ajaxStart:function() {
setTimeout(function(){
if (jQuery.active === 1) {
$body.addClass("loading");
}
}, 2000);
},
ajaxComplete: function() {$body.removeClass("loading"); }
});