Time out Ajax requests with jquery?

Question

Hi

I think that you can set like on post and get methods in jquery timeouts but I am wondering does jquery have a global timeone like it has with ajax start and stop.

Like I would like to set it that if say a post or get or some sort of ajax request is running and it runs more then X amount of seconds. That a popup or something in that nature comes up saying that the "server is slow and the request has timed out" and kills that request.

Then the user can either try again or do something else.

Does jquery have something like this?

Thanks

Answer 1

Yep, jQuery has a 'timeout' property (in milliseconds) you send the $.ajax() event:

http://www.bennadel.com/blog/1500-Catching-Timeout-Errors-With-jQuery-Powered-AJAX.htm

$.ajax(
  {
   method: "get",
   url: "yourpage.php",
   dataType: "json",
   timeout: (3 * 1000), // 3 seconds

   success: function(){
    //success code here
   },

   error: function( request, strError ){
    //error code here
   }
  }
);

Answer 2

The jQuery.ajax function is what you want. It gives you access to a pretty large set of options for making AJAX calls.

Specifically, you're going to want to make a call similar to

$.ajax({'complete': callbackFunction, 'url': 'foo/bar/', 'timeout': 5000, 'error': errorCallback});

The two options you're interested in are timeout and error. The entire documentation for the function is here. It's a bit more work than using the more standard get/post functions, but much more flexible.

The error function is very similar to the standard callback you use with any jQuery AJAX request. While the callback is called if the request succeeds, the error function is called when it fails (such as 404 errors, or when the timeout is hit). You'd use the error function to display your message to the user that their request has timed out. Full documentation on the function's arguments (which practically speaking, you probably won't need to use) is available on the $.ajax doc page (linked earlier).

Alternatively, you can set the timout globally on every AJAX call by using the jQuery.ajaxSetup function. Its arguments are exactly the same as the jQuery.ajax function, so you'd do something like this:

$.ajaxSetup({'timeout': 5000, 'error': errorCallback});

The upside is that you can continue using jQuery.get/jQuery.post, but the downside is that you have to do extra work to make AJAX calls without a timeout.