計算多個異步請求的處理和請求時間

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