title: Calculating Processing and Request time for multiple Asynchronous Requests
body: <p>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. </p>
  
  <p>For this request, I am trying to calculate: </p>
  
  <ul>
  <li>Request Time (how much total time it took for client to get data from server) </li>
  <li>Processing Time (how much total time it took for client to render the data on client side)</li>
  </ul>
  
  <p>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.</p>
  
  <p>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)</p>
  
  <p>But somehow my calculation doesn't produce correct results. Could any one please provide me some suggestions for this issue? </p>
  
  <p>for explaining my question in more better way:</p>
  
  <pre><code>var dataProviderRequestsStartTime = [];
  var dataProviderRequestsEndTime = [];
  
  var dataParsingStartTime = [];
  var dataParsingEndTime = [];
  
  getResults(ids);
  
  var getResults = function(totalIds) {
          for(var i=0; i&lt;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);
  };
  </code></pre>
  
  <p>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.</p>