Set timeout for ajax (jQuery)

Javascript Problem Overview

$.ajax({
    url: "test.html",
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

Sometimes success function works good, sometimes not.

How do I set timeout for this ajax request? In example, 3 seconds, if time is out, then show an error.

The problem is, ajax request freezes the block until finishes. If server is down for a little time, it will never end.

Javascript Solutions

Solution 1 - Javascript

Please read the $.ajax documentation, this is a covered topic.

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 3000 // sets timeout to 3 seconds
});

You can get see what type of error was thrown by accessing the textStatus parameter of the error: function(jqXHR, textStatus, errorThrown) option. The options are "timeout", "error", "abort", and "parsererror".

Solution 2 - Javascript

Here's some examples that demonstrate setting and detecting timeouts in jQuery's old and new paradigmes.

Live Demo

Promise with jQuery 1.8+

Promise.resolve(
  $.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
  })
).then(function(){
  //do something
}).catch(function(e) {
  if(e.statusText == 'timeout')
  {     
    alert('Native Promise: Failed from timeout'); 
    //do something. Try again perhaps?
  }
});

jQuery 1.8+

$.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === 'timeout')
    {     
        alert('Failed from timeout'); 
        //do something. Try again perhaps?
    }
});

jQuery <= 1.7.2

$.ajax({
    url: '/getData',
    error: function(jqXHR, textStatus){
        if(textStatus === 'timeout')
        {     
             alert('Failed from timeout');         
            //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000 //3 second timeout
});

Notice that the textStatus param (or jqXHR.statusText) will let you know what the error was. This may be useful if you want to know that the failure was caused by a timeout.

> error(jqXHR, textStatus, errorThrown) > > A function to be called if the > request fails. The function receives three arguments: The jqXHR (in > jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of > error that occurred and an optional exception object, if one occurred. > Possible values for the second argument (besides null) are "timeout", > "error", "abort", and "parsererror". When an HTTP error occurs, > errorThrown receives the textual portion of the HTTP status, such as > "Not Found" or "Internal Server Error." As of jQuery 1.5, the error > setting can accept an array of functions. Each function will be called > in turn. Note: This handler is not called for cross-domain script and > JSONP requests.

src: http://api.jquery.com/jQuery.ajax/

Solution 3 - Javascript

You could use the timeout setting in the ajax options like this:

$.ajax({
    url: "test.html",
    timeout: 3000,
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

Read all about the ajax options here: http://api.jquery.com/jQuery.ajax/

Remember that when a timeout occurs, the error handler is triggered and not the success handler :)

Solution 4 - Javascript

use the full-featured .ajax jQuery function. compare with https://stackoverflow.com/a/3543713/1689451 for an example.

without testing, just merging your code with the referenced SO question:

target = $(this).attr('data-target');

$.ajax({
    url: $(this).attr('href'),
    type: "GET",
    timeout: 2000,
    success: function(response) { $(target).modal({
        show: true
    }); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            alert(t);
        }
    }
});

Solution 5 - Javascript

your request should be like below.

client.ajax({
               url:'web-url',
               method: 'GET',
               headers: 'header',
               timeout: 3000
          });

Solution 6 - Javascript

Don't forget to check NginX settings also if your requests are going through NginX.

Ajax options.timeout is one thing but nginx request timeout might need adjusting also.

See https://ubiq.co/tech-blog/increase-request-timeout-nginx/

Content Type	Original Author	Original Content on Stackoverflow
Question	James	View Question on Stackoverflow
Solution 1 - Javascript	Intelekshual	View Answer on Stackoverflow
Solution 2 - Javascript	Brandon Boone	View Answer on Stackoverflow
Solution 3 - Javascript	Martin Jespersen	View Answer on Stackoverflow
Solution 4 - Javascript	Rudolf Mühlbauer	View Answer on Stackoverflow
Solution 5 - Javascript	Lovekush Vishwakarma	View Answer on Stackoverflow
Solution 6 - Javascript	Riaan Schutte	View Answer on Stackoverflow