Ahmed Fouad Ahmed Fouad - 1 year ago 51
Ajax Question

How to set timeout on $.ajax request and redo it if it takes too long?

Can someone show me a practical example on setting a timeout to my $.ajax request and redo the entire request if the first request is timed out, I've read the docs and didn't get it. I will appreciate any help.

Here is my $.ajax request.

url: '<?php bloginfo('template_directory'); ?>/ajax/product.php',
type: 'get',
data: {product_id : product_id},
beforeSend: function(){
$('#details').html('<div class="loading"></div>');
success: function(data){
$('#details').css({opacity: 0}).html(data).stop().animate({left: 0, opacity: 1}, 800);
return false;

Answer Source

The ajax function takes a timeout parameter and you can check the status in case of error.

var call =function(){
        url: '<?php bloginfo('template_directory'); ?>/ajax/product.php',
        type: 'get',
        timeout: 400,
        error: function(x, textStatus, m) {
            if (textStatus=="timeout") {

You might want to make something a little smarter to avoid permanent calls...

From the documentation :

Set a timeout (in milliseconds) for the request. This will override any global timeout set with $.ajaxSetup(). The timeout period starts at the point the $.ajax call is made; if several other requests are in progress and the browser has no connections available, it is possible for a request to time out before it can be sent. In jQuery 1.4.x and below, the XMLHttpRequest object will be in an invalid state if the request times out; accessing any object members may throw an exception. In Firefox 3.0+ only, script and JSONP requests cannot be cancelled by a timeout; the script will run even if it arrives after the timeout period.