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

Question

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.

    $.ajax({
        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){
            $('.iosSlider').fadeOut('fast');
            thisprod.addClass('current');
            $('#details').css({opacity: 0}).html(data).stop().animate({left: 0, opacity: 1}, 800);
        }
    });
    return false;

possible duplicate of How do I resend a failed ajax request? — user2284570
– user2284570, Commented Oct 10, 2014 at 19:27

Denys Séguret · Accepted Answer · 2012-09-04 15:13:01Z

7

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

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

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.

edited Sep 4, 2012 at 15:13

answered Sep 4, 2012 at 15:00

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robin Maben Over a year ago

This will work if there is only one kind i.e. url to which requests are made. Neat answer, nonetheless! :)

Malevolence · Accepted Answer · 2012-09-04 15:13:41Z

0

I would use the jquery deferred fail callback for this case. http://api.jquery.com/deferred.fail/

answered Sep 4, 2012 at 15:13

Malevolence

1,85712 silver badges9 bronze badges

Comments

Robin Maben · Accepted Answer · 2012-09-04 15:15:14Z

0

a. You can maintain a queue of all the requests that you make.

$.xhrQueue = [];

b. Enqueue each request that you make

$.ajaxSetup({
    beforeSend: function (e, xhr) {  
            $.xhrQueue .push(xhr);
        }
});

c. Poll for which requests completed vs timed-out

setInterval(function(){
    $.each($.xhrQueue, function (xhr) {
       //check whether status is complete, 
       //with some try-catch you can know which were the timed-out/not-sent ones

    });
}, 1000);

_{Note: If not beforeSend, you can go via some other function through which you attempt to make an ajax call}

edited Sep 4, 2012 at 15:15

answered Sep 4, 2012 at 15:07

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Comments

Codegiant · Accepted Answer · 2016-08-02 12:50:43Z

-1

Try this

var setTime = setTimeOut(function() {
    $.ajax({
        url: '<?php bloginfo('
        template_directory ');?>/ajax/product.php',
        type: 'GET',
        data: {
            'product_id': product_id
        }
    }).beforeSend(function() {
        $('#details').html('<div class="loading"></div>');
    }).done(function(data) {
        $('.iosSlider').fadeOut('fast');
        thisprod.addClass('current');
        $('#details').css({
            opacity: 0
        }).html(data).stop().animate({
            left: 0,
            opacity: 1
        }, 800);
    });
}, 2000);

edited Aug 2, 2016 at 12:50

answered Sep 4, 2012 at 15:07

Codegiant

2,1501 gold badge22 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related