了解 Ajax 请求需要多长时间才能完成

Question

找出特定

$.ajax()

请求花费了多长时间的好方法是什么？

我想获取此信息，然后将其显示在页面上的某个位置。

答案??::::

我是 javascript 新手，如果您不想内联“成功”函数（因为它将是一个更大的函数），这是我能想到的最好的方法，这是否是一个好方法？ ？我觉得我把事情变得过于复杂了...:

makeRequest = function(){
    // Set start time
    var start_time = new Date().getTime();

    $.ajax({ 
        async : true,
        success : getRquestSuccessFunction(start_time),
    });
}

getRquestSuccessFunction = function(start_time){
    return function(data, textStatus, request){
        var request_time = new Date().getTime() - start_time;
    }
}

Answer 1

@codemeit 是对的。他的解决方案如下所示，使用 jQuery 处理 ajax 请求。这将返回请求时间（以毫秒为单位）。

var start_time = new Date().getTime();

jQuery.get('your-url', data, function(data, status, xhr) {
        var request_time = new Date().getTime() - start_time;
});

Answer 2

这才是正确的做法。

$.ajax({
    url: 'http://google.com',
    method: 'GET',
    start_time: new Date().getTime(),
    complete: function(data) {
        alert('This request took '+(new Date().getTime() - this.start_time)+' ms');
    }
});

https://jsfiddle.net/0fh1cfnv/1/

Answer 3

这不会给出准确的计时，因为 javascript 使用事件队列。这意味着你的程序可能会像这样执行：

• 启动AJAX请求
• 同时处理等待的鼠标单击事件/任何其他等待的代码行
• 开始处理 AJAX 就绪响应

不幸的是，据我所知，无法获取事件添加到队列中的时间。 Event.timeStamp 返回事件从队列中弹出的时间，请参阅此小提琴：http://jsfiddle.net/mSg55/.

HTML：

<a href="#">link</a>
<div></div>

Javascript：

$(function() {
    var startTime = new Date();
    $('a').click(function(e) {
        var endTime = new Date(e.timeStamp);
        $('div').append((endTime - startTime) + " ");
        //produce some heavy load to block other waiting events
        var q = Math.PI;
        for(var j=0; j<1000000; j++)
        {
            q *= Math.acos(j);
        }
    });

    //fire some events 'simultaneously'
    for(var i=0; i<10; i++) {
        $('a').click();
    }
});

Answer 4

亚里士多德关于事件队列的说法是正确的。您可以做的就是将时间戳创建放入您知道将尽可能靠近 AJAX 请求开始处执行的代码部分中。

当前稳定版本的 jQuery（撰写本文时：2.2.2）有一个

beforeSend

键，它接受一个函数。我会在那里做。

请注意，在 JavaScript 中，在“函数外部”声明的所有全局范围的变量都会在程序启动时立即初始化。了解 JavaScript 作用域将会有所帮助。 棘手的部分是访问您在

beforeSend

回调中的

success

函数中声明的变量。如果您在本地声明它（使用

let

），您将无法在该函数的范围之外轻松访问它。这里是一个示例，它会给出稍微更准确的结果（

警告：在大多数情况下！

）这也是危险，因为它声明了一个全局范围的变量（start_time），这可能会与同一平台上的其他脚本产生不良交互页面等

我很想深入了解 JavaScript 原型

bind

函数的世界，但它有点超出了范围。这是一个替代答案，请小心使用，并且在生产之外。

'use strict';
$.ajax({
    url: url,
    method: 'GET',
    beforeSend: function (request, settings) {
        start_time = new Date().getTime();
    },
    success: function (response) {
        let request_time = new Date().getTime() - start_time;
        console.log(request_time);
    },
    error: function (jqXHR) {
        console.log('ERROR! \n %s', JSON.stringify(jqXHR));
    }
]);

Answer 5

您可以利用Firefox插件Firebug来检查AJAX请求和响应的性能。

http://getfirebug.com/

或者您可以利用 Charles 代理或 Fiddler 来嗅探流量以查看性能等。

Answer 6

这个怎么样：

首先使用请求对象全局设置属性TimeStarted。

$(document).ajaxSend(function (event, jqxhr, settings) {
    jqxhr.TimeStarted = new Date();
});

然后调用任何ajax

var request = $.ajax({ 
    async : true,
    success : function(){
    alert(request.TimeStarted);
   },
});

Answer 7

这给出了以毫秒为单位的输出
就像 makeRequest:1355.4951171875ms

Answer 8

var start_time;   
$.ajaxSetup({
  beforeSend: function () {
    start_time = new Date().getTime();
  },
  complete: function () {
    var request_time = new Date().getTime() - start_time;
    console.log("ajax call duration: " + request_time);
  }
});

Answer 9

var d1 = new Date();  
$.ajax({
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    url: '/Survey/GET_GetTransactionTypeList',
    data: {},
    dataType: 'json',
    async: false,
    success: function (result) {
        var d2 = new Date();
        var seconds = (d2 - d1) / 1000;
        console.log(seconds);           
    },
    error: function (request, status, error) {
        alert(request.statusText + "/" + request.statusText + "/" + error);
    }
}); 

如果你想减少ajax调用初始化持续时间，只需将async值设置为false而不是true。像这样......

async: false,

Answer 10

const clock = () => {
const start = new Date().getTime();

return {
    measure: () => {
        const completed = new Date().getTime();

        return completed - start;
    },
};
};

const httpClient = async () => new Promise((res) => setTimeout(res, 1000));

const makeRequest = async () => {
const { measure } = clock();

await httpClient();

return measure();
};

const result = await makeRequest();

console.log(`Request took ${result}ms`);