How to set timeout for ajax by using jQuery? - GeeksforGeeks

13 Dec, 2021
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:  
html
<!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
<?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:
html
<!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
<?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.
sagartomar9927
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?