1

对于我的应用程序中的数据可视化请求，我将多个 AJAX 请求发送到一个 servlet，以便以块的形式获取数据，并且在每个请求的回调中，接收到的数据在地图上呈现。

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

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

为了做到这一点，我在将每个请求发送到服务器之前捕获每个请求的开始时间（使用 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 启动和停止计算的总时间的值。

4

2 回答 2

1

查看“总时间”的.ajaxStart()和.ajaxStop()事件，（<-那些也非常适合进度条）

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调用timingStart()的结果附加到 dom 树之前调用。
  3. 让服务器添加timingEnd()到每个响应的末尾。

totalTime然后将设置为将所有内容添加到 DOM 树所花费的时间。

于 2012-09-14T01:51:25.727 回答
0

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

于 2014-10-29T07:02:47.557 回答