计算多个异步请求的处理和请求时间

Question

对于我的应用程序中的数据可视化请求，我向一个servlet发送多个AJAX请求以获取数据的块和每个请求的回调，接收到的数据被渲染地图。

对于这个要求，我试图计算：

• 请求时间（多少总时间把客户端从服务器获取数据）
• 处理时间（多少总所花费的时间客户端呈现在客户端的数据）

为了做到这一点，我捕捉每个请求的开始时间将其发送到服务器（使用jQuery“beforeSend”）和每个请求“的onSuccess”事件之前，结束时间被捕获。

一旦完成所有请求，我就会从上次请求的“结束时间”中扣除第一个请求的“开始时间”，以便计算客户端从服务器获取记录所花费的总时间。 （类似于处理时间）

但不知何故，我的计算不会产生正确的结果。有没有人可以就这个问题提供一些建议？

用于解释更多更好的办法，我的问题：

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

最后，我requestTime（totalRequestTime）和parsingTime（totalParsingTime）。但问题是这些都不会产生接近使用ajax启动和停止计算的总时间的值。

Answer 1

看看.ajaxStart()和.ajaxStop()事件 “总的时间”，（< - 这些也是伟大的progressbars）

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

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

和.ajaxSend()和“累计时间.ajaxComplete()事件“计算。

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

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

看看这个代码：

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

注意，它只会占花一些时间进行Ajax调用，将不包括在初始页面加载时间。

时间解析：

1. 使用相同的功能，但之前更改totalTime到totalParsingTime。 （注意：你可以通过改变totalTime来引用一些其他变量来实现这一点）
2. 在将ajax调用的结果追加到dom树之前调用timingStart()。
3. 让服务器将timingEnd()添加到每个响应的末尾。

totalTime将被设置为将所有内容添加到DOM树的时间。

你

Answer 2

解决方案将依靠jQuery的Ajax回调方法

1. ajaxStart：注册一个处理程序中的第一Ajax请求开始时被调用。
2. ajaxStop：注册一个处理当所有Ajax请求已经完成，包括成功和错误回调

我在我的应用程序中使用下面的代码片段被称为和它的作品完美的罚款报告页面的渲染时间，包括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 
    });