How to set timeout for ajax by using jQuery?

In web programming, the Ajax is used so that the resultant data is shown in the one part of the web page, without reloading the page. The user needs to perform the Ajax request and wants the result within a timeframe. In this scenario, the jquery timeout feature is used in the code. Session timeout has been a very common feature in Ajax-based web applications.

In responsive interface, the programmer needs to delay the ajax request to achieve some task before the response. This can be achieved by using jQuery setTimeout() function. This function executes the given Ajax code after some amount of given time.

Syntax :

```
$.ajax(page_url);
```
```
$.ajax(page_url,[options]);
```

Parameters:

page_url: This parameter is used to submit data or retrieve data.
options: This parameter is used to hold the other configuration settings required for ajax request.

Below example illustrates the approach:

Example 1:

Code snippet:
```
$.ajax({
    url: "test.php",
    error: function(){
        //Error code
    },
    success: function(){
        //Success code
    }
   timeout: 5000 // sets timeout to 5 seconds
});
```
The success function is executed if the request succeeds. Or sometimes if an error occurred, its better to respond quickly than waiting for a longer time.This is handled in the error function. The below program, explains the implementation of timeout option in the ajax part of code. The timeout is the number which specifies time in milliseconds for the request to be handled.

Program:

HTML FIle:

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta charset="utf-8"> 

    <title>Set timeout for ajax using jQuery</title> 

    <style> 

        body { 

            width: 450px; 

            height: 300px; 

            margin: 10px; 

            float: left; 

        } 

        .height { 

            height: 10px; 

        } 

    </style> 

    <script src= 

"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 

    </script> 

    <script language="javascript"> 

        var ajaxObject = null; 

        // ajaxcall function will handle ajax call 

        function ajaxCall() { 

            var dataquery = 'true'; 

            if (ajaxObject != null) { 

                ajaxObject.abort(); 

                $("#ajaxOutput") 

                .html("Ajax aborted for initialization again! "); 

                ajaxObject = null; 

            } 

            // creating ajax call 

            ajaxObject = $.ajax({ 

                // setting the url 

                url: "data.php", 

                data: { 

                    dataquery: '' 

                }, 

                // Set to 5 seconds for timeout limit 

                timeout: 5000, 

                //Check for success message in ajaxOutput div 

                success: (function(response, responseStatus) { 

                    if (responseStatus == 'success') { 

                        $("#ajaxOutput").html(response); 

                    } 

                }), 

                // Check for existence of file 

                statusCode: { 

                    404: function() { 

                        $("#ajaxOutput") 

                        .html("File does not exists!"); 

                    } 

                }, 

                // If the time exceeds 5 seconds  

                // then throw error message 

                error: function(xhr, textStatus, errorThrown) { 

                    if (textStatus == 'timeout') { 

                        $("#ajaxOutput") 

                        .html("Error : Timeout for this call!"); 

                    } 

                } 

            }); 

        } 

    </script> 

</head> 

<body> 

    <h1 style="color:green">GeeksforGeeks</h1> 

    <b> Set timeout for ajax using jQuery </b> 

    <div class="height"> </div> 

    <div> 

        <button type="button" onclick="ajaxCall()"> 

          Send Data 

        </button> 

        <div class="height"> </div> 

        <div id="ajaxOutput"> </div> 

    </div> 

</body> 

</html>

PHP File: The following PHP file is used in the above example.
<?php



    if($_GET["dataquery"]=='true')

    {

        sleep(7);

    }



    echo "Welcome to GeeksForGeeks";

?>

Output :

Before Clicking on the button :

After Clicking on the button :

Example 2: The setTimeout() is a jQuery function which executes a code snippet after delaying a specific time limit. For example, delaying a popup window for a specific time limit, for a user visiting some website. This method accepts a pointer to a function as its first parameter. In this example, delay the Ajax code for 4 seconds using the setTimeout() method.

Code snippet :

function callerFunction(){
  alert("jQuery setTimeOut execution is fine!");
}
setTimeout(callerFunction, 4000);

var callerFunction = function(){
  alert("Execution point!");
};
setTimeout(callerFunction, 4000);

Program:

HTML File:

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta charset="utf-8"> 

    <title>Set timeout for ajax using jQuery</title> 

    <style> 

        <style> body { 

            width: 450px; 

            height: 300px; 

            margin: 10px; 

            float: left; 

        } 

        .height { 

            height: 10px; 

        } 

    </style> 

    <script src= 

"https://code.jquery.com/jquery-3.4.1.js"> 

    </script> 

    <script> 

        $(function() { 

            var timedelay = 4000; 

            $('#sendData').on('click', function() { 

                $.ajax({ 

                    type: 'POST', 

                    url: 'test.php', 

                    data: { 

                        "data": "checkData" 

                    }, 

                    success: function(response) { 

                        setTimeout(function() { 

                            $('#ajaxOutput') 

                            .append(response); 

                        }, timedelay); 

                    } 

                }); 

            }); 

        }); 

    </script> 

</head> 

<body> 

    <h1 style="color:green">GeeksforGeeks</h1> 

    <b>Set timeout for ajax using jQuery</b> 

    <div class="height"></div> 

    <div> 

        <button type="button" id="sendData"> 

          Set timeout for getting data 

        </button> 

        <div class="height"></div> 

        <div id="ajaxOutput"></div> 

    </div> 

</body> 

</html>

PHP File: For the above example code, use the following PHP file.

<?php 

    if(isset($_POST['data']) && $_POST['data'] == 'checkData'){ 

         $data['value1'] = 'Successfully received first data'; 

         $data['value2'] = 'Successfully received second data'; 

         $response = json_encode($data); 

         echo $response; 

    } 
?>

Output:

Before Clicking on the button :

After Clicking on the button :

Cancel the timeout: Sometimes the programmer needs to cancel the timer set in the code by using jQuery clearTimeout() method.

Code snippet:

var timerValue = setTimeout(timerFunction, 5000);
clearTimeout(timerValue);

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

Article Tags :

JQuery

Web Technologies

jQuery-Misc