Catching Timeout Errors With jQuery Powered AJAX

Posted February 16, 2009 at 9:41 AM by Ben Nadel

Tags: Javascript / DHTML

Reader Comments

I think we can just provide a "Cancel" link, which the user can click and cancel the request if it's taking too long.

@Chandra,

We can definitely take advantage of the abort() function on the XMLHttpRequest object; but, I think there its a good idea to build in a timeout as an AJAX event is supposed to be snappy and if its not, something is probably going wrong (or at least the user should be alerted in some way).

Thanks! This helped a lot.

I think that the other helper methods like getJSON, get, post, etc. should also have provision for handling timeout and other errors. I had to replace all ajax calls to use $.ajax instead.

@Hemanshu,

The methods like getJSON() are all wrappers to the .ajax() method. Underneath, they all use .ajax(); so, I guess the feeling is, they provide these short hands with less inputs so you don't have to provide them all. But, I agree - they probably should have error callbacks.

@ Hemanshu

You can actually use the ajaxSetup function to give all of your queries a certain timeout value as well as other options included in the $.ajax function.

You simply use
$.ajaxSetup({ timeout: 20000
});

If you want to make it specific to each request then yes, you would have to convert all of your ajax requests to use the $.ajax function.

Hope this helps someone have a bit of time :)

@Richard,

Good point - the ajaxSetup() is definitely a good function to know about.

not wanting to rewrite to jQuery a complicated page already working well using Spry - Is there a Spry equivalent to
$.ajaxSetup({ timeout: 20000
});

@Mike,

Hmm, I've never really touched Spry. I've seen it, but don't know much about the specs. Try asking Ray Camden - he's Mr. Spry :)

I got a small problem with timeout and unreachable URLs. jQuery 1.4.2 will call the error function twice when it cannot reach the destination url.

First with status == "parsererror" and the second time with "timeout". The first results from not being able to parse the response (because there is no response).

Any ideas how to prevent that?

@Philk,

Hmm, that's an odd one. I almost think I remember seeing this discussed somewhere. I think someone may have even said that this was the expected behavior?? But, don't quote me on that - I could be way wrong.

I don't have any good suggestions other than checking for the error type and simply exiting the method if the error is not one you want deal with.

Sorry I don't have any better advice.

I wonder if there is a way to attach , if you will, the abort method to just one ajax function. For example , what if you have two async ajax requests? #1 keeps running, but number #2 is called, if either has error, I want to cancel and return , but it seems a bit tricky to get the function in error(ajax call #1) to return on error or cancel if the other one is still running. Did that make sense?
Thanks,
Eric Nickus
retsman

@Eric,

I'm sorry, I'm not sure that I follow exactly what you are saying. Are both AJAX requests firing off at the same time? Or does the second one fire if the first one fails?

Hey Ben,

I use your site pretty often so it's nice to finally put a word in ;). Maybe in jQuery 1.3.1 there was a method parameter for the $.ajax request I don't know, but in the latest 1.4.3 your method parameter is instead called type. http://api.jquery.com/jQuery.ajax/

Here's a quick sample from that page.

Not trying to be a nuisance, just pointing it out =).

Anyways, you're awesome man, keep it up!

-Kevin

I am having a problem with the timeout function.

I have a setInterval wich does an ajax call. If the ajax call timesout, all other ajax requests will automatically timeout too..

Any idea how to solve this problem??

sample:

setInterval(function(){
ajaxCall();
}, 10000);

$.ajaxSetup({
timeout: 1000,
url : '/ajax/url.php',
type : 'post',
dataType: 'JSON',
cache: false
});

function ajaxCall() {
$.ajax({
success : function(r){
console.log(r);
},
error : function(){
}
});
}

jQuery's timeout is useful specially in JSONP requests (made via the same $.ajax, but with data: 'jsonp' parameter). Thanks for this post.

Hello, thanks a lot for this. This gave me an idea on a prototype I am working on. Also, thanks to the commentors.

$.ajaxSetup worked for me. Most of my requests are using the shorthand get, it would take much time and energy to replace 'em all.

Thanks!

Hi Ben,

I need help with $.ajax call. currently page is taking around 45secs for URL to respond and timeout value is set as 30*1000 .
Now to avoid timeout error I increased timeout value from 30*1000 to 50*1000 , but page still timesout in 30secs.... Could you help what I am missing (using jQuery 1.4)
Thanks in advance

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment