Set timeout for ajax (jQuery)

javascript jquery html css ajax

482,859

Solution 1

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

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

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

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

your request should be like below.

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

View more solutions

482,859

James

Updated on November 09, 2021

Comments

James over 2 years
```
$.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.
- pimvdb about 13 years
  
  You need a , there after the }.
- Bahram over 11 years
  
  take look at this > stackoverflow.com/questions/12930759/…
- nathanchere over 10 years
  
  possible duplicate of jQuery $.ajax timeout setting
Admin over 11 years

H-Bahrami and Rudolf Mühlbauer thanks for reply but i am new in ajax so please clarify through my code...because i have already see these answer but i don't know What's going on..so please help me...
Admin over 11 years

how I can do through .load() ? It is possible or not ?
Rudolf Mühlbauer over 11 years

@S.S, try looking for timeout in the documentation of load: api.jquery.com/load -- and i had a typo in my code, corrected.
Alejandro García Iglesias about 11 years

What's the difference between $.ajax().fail() and $.ajax().error()?
Brandon Boone about 11 years

@GarciaWebDev - See Call to jquery ajax - .fail vs. :error
brandonscript almost 11 years

+1 for including the jQuery 1.8+. Most other answers to similar questions only include success/error from <.
Adrien Be almost 10 years

regarding catching timeout error stackoverflow.com/questions/3543683/…
Igor Mironenko almost 8 years

Just doesn't seem to work for me, timeout: 1, confirmed it's being passed, just never times out
justdan23 over 4 years

Make sure to wrap the entire $.ajax call with a try/catch. Aborts are not caught by jQuery and will be thrown outside of the $.ajax call.
C. Celora over 2 years

I tried to copy the JQuery 1.8+ solution, but it has a invisible character at the end <0x200b>, which compiles in a syntax error on the browser.