Calculating Processing and Request time for multiple Asynchronous Requests

Question

For data visualization request in my application, I am sending multiple AJAX requests to a servlet in order to get the data in chunks and on callback of each request, the data received is rendered over map.

For this request, I am trying to calculate:

• Request Time (how much total time it took for client to get data from server)
• Processing Time (how much total time it took for client to render the data on client side)

In order to do this, I am capturing start time of each request before sending it to server (using jquery "beforeSend") and "onSuccess" event of each request, the end time is captured.

Once the all requests are completed, I am deducting the "start time" of first request from the "end time" of last request in order to calculate the total time the client took for fetching records from server. (Similarly for Processing Time)

But somehow my calculation doesn't produce correct results. Could any one please provide me some suggestions for this issue?

for explaining my question in more better way:

var dataProviderRequestsStartTime = [];
var dataProviderRequestsEndTime = [];

var dataParsingStartTime = [];
var dataParsingEndTime = [];

getResults(ids);

var getResults = function(totalIds) {
        for(var i=0; i<10; i++;) {
       requestResultForOneChunk(totalIds[i]);
        }
};

var requestResultForOneChunk = function(streetIds) {
    $.ajax({
        beforeSend: function() {
            var requestStartTime = new Date().getTime();
            dataProviderRequestsStartTime.push(requestStartTime);
        },
        type : 'POST',
        url : "myServlet",
        contentType : "application/x-www-form-urlencoded",
        data : {
            "ids" : streetIds,
        },
        success : function(response) {
            //Request Finished
            var dataProvideRequestEndTime = new Date().getTime();
            dataProviderRequestsEndTime.push(dataProvideRequestEndTime);

            addFeaturesToMap(response);
        },
        error : function(x, e) {
            alert("Something went wrong in the request" + e);
        }
    });
};

var addFeaturesToMap = function(measurements) {
    //Parsing Started
    var featureParsingStartTime = new Date().getTime();
    dataParsingStartTime.push(featureParsingStartTime);

    doParsing(measurements);

    //Parsing Finished
    featureParsingEndTime = new Date().getTime();
    dataParsingEndTime.push(featureParsingEndTime);
};

$("#loading").bind(
        "ajaxStart",
            function(options) {
                ajaxStartTime = options.timeStamp;
            }).bind("ajaxStop", function(options) {
        var ajaxEndTime = options.timeStamp;
        var totalTime = (ajaxEndTime - ajaxStartTime);
        calculateTimeBreakDown();
});

var calculateTimeBreakDown = function() {
    var totalValues = dataProviderRequestsEndTime.length;
    var lastValueIndex = totalValues - 1;

    // Request Time calculation
    var endTimeOfLastRequest = dataProviderRequestsEndTime[lastValueIndex];
    var startTimeOfFirstRequest = dataProviderRequestsStartTime[0];
    var totalRequestTime = (endTimeOfLastRequest - startTimeOfFirstRequest);

    // Parsing Time Calculation
    var endTimeOfLastParsing = dataParsingEndTime[lastValueIndex];
    var startTimeOfFirstParsing = dataParsingStartTime[0];
    var totalParsingTime = (endTimeOfLastParsing - startTimeOfFirstParsing);
};

Finally, I have requestTime(totalRequestTime) and parsingTime(totalParsingTime). But the problem is adding these both doesn't produce value near to total time which is calculated using ajax start and stop.

Answer 1

solution for you would to rely on jquery ajax callback methods

1. ajaxStart : Register a handler to be called when the first Ajax request begins.
2. ajaxStop : Register a handler to be called when all Ajax requests have completed including success and error callbacks

I have used the below code snippet in my application and it works perfectly fine to report page rendering time including ajaxs.

 var startTime = 0,endTime = 0;
    $(document).ajaxStart(function(){
        startTime = new Date();
    });

    $(document).ajaxStop(function(){
        endTime = new Date();
        console.log("total time required : ",endTime - startTime); //Total time in milliseconds including time spent in success or error callbacks
    });

Answer 2

look at the .ajaxStart() and .ajaxStop() events for "total time", (<- those are also great for progressbars)

http://api.jquery.com/ajaxStart/

http://api.jquery.com/ajaxStop/

and .ajaxSend() and .ajaxComplete() events for "cumulative time" calculations.

http://api.jquery.com/ajaxSend/

http://api.jquery.com/ajaxComplete/

look at this code:

var totalTime = null;
var cachedTime = null;

function alertLoadingTime() {
    if(!totalTime) return;
    var loadingTime = totalTime / 1000;
    console.log("loaded " + loadingTime + " seconds");
}

function timingStart() {
    cachedTime = new Date;
}

function timingEnd() {
    var endTime = new Date;
    totalTime += endTime - cachedTime;
    cachedTime = null;
    alertLoadingTime();
}

$(document).ajaxStart(timingStart);

$(document).ajaxStop(timingEnd);

note that it will only account for time spent doing ajax calls and won't include the initial page loading time.

to time the parsing:

1. use the same functions as before but change totalTime to totalParsingTime. (Note: you can achieve this by changing totalTime to reference some other variable)
2. Call timingStart() right before you append the result of the ajax call to the dom tree.
3. Have the server add timingEnd() to the end of every response.

totalTime will then be set to the time it took to add everything to the DOM tree.