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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        </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>

    chevron_right

    
    

  • PHP File: The following PHP file is used in the above example.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?php
             
        if($_GET["dataquery"]=='true'
        {
            sleep(7);
        }
           
        echo "Welcome to GeeksForGeeks";
    ?>

    chevron_right

    
    

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);
  •        Or

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

Program:

  • HTML File:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        </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>

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?php
        if(isset($_POST['data']) && $_POST['data'] == 'checkData'){
             
             $data['value1'] = 'Successfully recieved first data';
             $data['value2'] = 'Successfully recieved second data';
             $response = json_encode($data);
             echo $response;
        }
    ?>

    chevron_right

    
    

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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.