防止Ajax请求超时（jquery）

Question

I have about 100 ajax requests that I fire at the same time, I thought browsers only allowed a few requests simultaneously, so the rest would be added to a queue.

The problem however is that jquery/javascript seems to use the timeout value from the time the requests were created via jquery, not from the time the requests were actually executed by the browser. So I get a bunch of timeouts. Is it possible to have the timeout start counting from the time the request is actually going to the URI location, instead of the time it is added by jquery?

Answer 1

You may use the timeout settings for ajax request. You may find the jQuery documentation for the same at : http://api.jquery.com/jQuery.ajax/

However 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. Therefore you should set some very large value for the timeout if you wish to follow this approach.

A better approach would be to have a local proxy which entertains all the AJAX calls and fires them in a group of 5-10 and then when all these have finished successfully then it fires the next 5-10 requests.

Answer 2

Here is a kind of queue system. Starts by calling the ajax function N times, and then after each success, calls ajax function again. There is also a check in the success callback to see if all the assets have been loaded...

demo fiddle

$(document).ready(function(e) {
    $("form[ajax=true]").submit(function(e) {

        e.preventDefault();

        var form_url = $(this).attr("action");
        var form_method = $(this).attr("method").toUpperCase();

        $("#loadingimg").show();

        var started = 1, done = 0;
        function ajax(){
                $.ajax({
                    url: form_url, 
                    type: form_method,      
                    data: "html=started "+(started++),
                    cache: false,
                    success: function(returnhtml){
                        done++;
                        $("#result").html(returnhtml);
                        $("#loadingimg").hide();
                        if(started <= 100){
                            ajax();
                        } else if (done == 100) {
                            alert("all done!");
                        }

                    }           
                });    
        }
        // how many concurrent calls?
        for(i=0;i<10;i++){
            ajax();
        }
    });

});