Question

对于我的应用程序中的数据可视化请求，我发送多个AJAX请求到servlet，以便在每个请求的块和回调中获取数据，接收的数据通过map呈现。

对于此请求，我正在尝试计算：

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

为了做到这一点，我将每个请求的开始时间发送到服务器（使用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 start和stop计算的。

Answer 1

查看.ajaxStart()和.ajaxStop()事件的“总时间”，（＆lt; - 这些对于进度条来说也很棒）

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调用所花费的时间，并且不会包含初始页面加载时间。

解析时间：

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

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

Answer 2

解决方案，你将依赖于jquery ajax回调方法

ajaxStart：注册第一个Ajax请求开始时要调用的处理程序。
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
    });

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

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

2 个答案: