Delay AJAX call for X seconds

Sam Deering

jQuery code snippet to delay AJAX call for X seconds. Could be used for events that require action before getting data from the server side via AJAX.

Update: There is an easier way to do this by using setTimeout() function – See below for an example.

Enjoy! :)

var pendingCall = { timeStamp: null, procID: null };

$('li a').click(function (e) {
    e.preventDefault();
    var getUrl = $(this).attr("href");
	var timeStamp = Date.now();

    var printCall = function () {
        $.ajax({
            url: getUrl,
            type: "GET",
            beforeSend: function () { },
            error: function (request) { alert(request) },
            success: function (data) {
                if (pendingCall.timeStamp != timeStamp) { return false; }
                $('#contentdiv').html(data);
                pendingCall.procID = null;
            }
        });
    };

    if (pendingCall.procID) {
        clearTimeout(pendingCall.procID)
    };
	//set the time before call 3000 = 3 seconds
    pendingCall = { timeStamp: timeStamp, procID: setTimeout(printCall, 3000) };
});

setTimeout Alternative

Here is a snippet that will remove loading mask from your page, one second after a website was loaded. You can setup a loading mask to cover your whole website while your website is loading preventing people form seeing loading images for example.
 

jQuery(document).ready(function () {
	setTimeout( "jQuery('#loading_mask').hide();", 1000 );
});

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.codesign2.co.uk Lewis Cowles

    just use setTimeout, it’s not hard to do, this tutorial is overkill to an easy situation

  • jquery4u

    Hi Lewis,

    Yes good point, this function was just an alternative to the setTimeout() function. I’ve updated the post so that people know this is also available.

    Cheers
    Sam