Delay an Ajax Call by Few Seconds using setTimeout() Function

The JavaScript setTimeout() function is useful when you want to execute another function at a specified time. The time is usually set in milliseconds. This function is ideal for making an Ajax call after a few seconds of delay.

JavaScript setTimeout()

Let us first check the syntax of the function.

Syntax:

setTimeout(code, milliseconds)

The setTimeout() function takes two parameters. You can write a small code for the first parameter or you can call another function with many lines of codes. The second parameter takes a figure in milliseconds (1000 for 1 second etc). It will execute the code (if you have written a code) or call a function after the specified period.

Delay an Ajax call by few seconds using setTimeout() method in jQuery

See this Demo

In this article, I am using the setTimeout() function to make an Ajax call after a few seconds of delay. It’s just an example. However, you can use the function for a variety of purposes.

Delay the Ajax Call

I example here is an extension of one of my previously submitted post, where I have shown how to extract XML data using jQuery and Ajax. Therefore, I am not adding the markup or the XML file in this example.

<script>
    $(document).ready(function () {
        var timeDelay = 5000;           // MILLISECONDS (5 SECONDS).
        setTimeout(loadXML, timeDelay);  // MAKE THE AJAX CALL AFTER A FEW SECONDS DELAY.

        function loadXML() {
            $.ajax({
                type: 'GET',
                url: 'library.xml',
                dataType: 'xml',
                success: function (xml) {

                    $(xml).find('List').each(function () {
                        // APPEND (ADD) DATA TO A DIV.
                        $('#books').append(
                        '<div>' +
                            '<div><b>Name of Book: </b>' +
                                $(this).find('BookName').text() + '</div> ' +
                            '<div><b>Category: </b>' +
                                $(this).find('Category').text() + '</div> ' +
                            '<div><b>Price: </b>' +
                                $(this).find('Price').text() + '</div> ' +
                        '</div>');
                    });
                }
            });
        }
    });
</script>

Writing the script inside $(document).ready() function ensures it will execute the functions when the page has loaded. I have declared a variable called timeDelay and assigned a value of 5000, which is 5000 millisecond (or 5 seconds, to be more precious).

The setTimeout() function will call loadXML() function after 5000 milliseconds. The function has the Ajax procedure to parse XML data.

That’s it. Please check the demo below. Hope you find this article and its example useful. If you have any queries, then please do not hesitate to ask. Simply leave a message below.

See this Demo

← PreviousNext →