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?](http://stackoverflow.com/questions/8881614/how-do-i-resend-a-failed-ajax-request) — user2284570, Oct 10 '14 at 19:27

Denys Séguret · Accepted Answer · 2012-09-04T15:13:01.290

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.

This will work if there is only one kind i.e. url to which requests are made. Neat answer, nonetheless! :) — Robin Maben, Sep 04 '12 at 15:14

Robin Maben · Answer 2 · 2012-09-04T15:15:14.807

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}

score 0 · Answer 3 · answered Sep 04 '12 at 15:13

0

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

answered Sep 04 '12 at 15:13

Malevolence

1,857
12
9

Codegiant · Answer 4 · 2016-08-02T12:50:43.853

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);

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

4 Answers4

Linked

Related