Javascript 了解Ajax请求完成所需的时间

了解特定的

$.ajax（）

请求需要多长时间的好方法是什么

我想获得这些信息，然后将其显示在页面的某个位置

回答：：

我是javascript新手，如果您不想内联“success”函数（因为它将是一个更大的函数），这是我能想到的最好的方法。这是一个很好的方法吗？我觉得我把事情复杂化了

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

---

您可以将开始时间设置为var，并计算AJAX操作完成时的时间差

---

您可以使用Firefox插件Firebug来检查AJAX请求和响应的性能。或者你可以使用Charles proxy或Fiddler嗅探流量，查看性能等。

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

---

这不会给出准确的计时，因为javascript使用了。这意味着您的程序可能会这样执行：

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

不幸的是，据我所知，无法获取事件添加到队列的时间。Event.timeStamp返回事件从队列中弹出的时间，请参阅此fiddle:

Html:

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

$（函数（）{
var startTime=新日期（）；
$（'a'）。单击（函数（e）{
var endTime=新日期（如时间戳）；
$（'div'）.append（（endTime-startTime）+”）；
//产生一些重负载以阻止其他等待事件
var q=Math.PI；
对于（var j=0；jAristoteles，事件队列是正确的。您可以做的是将创建的时间戳插入到一段代码中，您知道该代码将在尽可能接近AJAX请求开始的地方执行

当前jQuery的稳定版本（在编写本文时：2.2.2）有一个接受函数的
beforeSend
键，我会在那里做

请注意，在JavaScript中，在函数之外声明的所有全局作用域变量都会在程序启动后立即初始化。了解JavaScript作用域将有助于此

棘手的部分是访问您在
success
回调中的
beforeSend
函数中声明的变量。如果您在本地声明它（使用
let
），则无法在该函数的作用域之外轻松访问它

下面是一个示例，它将给出稍微更准确的结果（警告：在大多数情况下！），这也是非常危险的，因为它声明了一个全局范围的变量（
start\u time
），该变量可能与同一页面上的其他脚本交互不良，等等

我很想深入了解JavaScript的原型功能，但它有点超出范围

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

这是正确的做法

$.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');
    }
});


这将以毫秒为单位提供输出
像makeRequest:1355.4951171875ms
这个怎么样：

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

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

然后调用任何ajax

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

我做了一些修改，得到了一个可以为所有ajax调用显示的通用函数，这意味着不必为每个ajax调用都执行相同的操作

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

您可以使用以下代码spinet

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,

可能重复的问题还没有被回答。@Wolph链接的问题被标记为这个问题的重复。我不明白这怎么可能。@ww139：这个问题更好，所以这个问题被标记为这个问题的重复。另外，这个问题有更好的答案谷歌浏览器使这很容易，转到要测量ajax请求的url，打开开发控制台并转到网络选项卡-每次请求通过时，它都会显示在此处。我对javascript不熟悉。这会使用唯一的开始时间变量，还是会被异步请求覆盖？这不适用于多个请求，DownVoting您需要创建一个在请求数组中，在ajax中的beforeSend（）函数中推送开始时间，然后在success（）函数中计算时间差

如果您想在节点中增加粒度，请在全局声明前加上

全局。

再次…不要在任何地方的生产中使用它。

start\u time

这里与ajax有什么特别的/相关的吗？或者您可以像这样简单地在ajax对象中声明您喜欢的任何键吗？如果是这样，那真的很酷，我没有想到这一点…！在事件队列方面也有一些保证吗？我的意思是-我们是否知道，以这种方式声明

start\u time

实际上会将该变量初始化为请求开始之前的指令，或者在请求开始之前是否有可能有其他东西潜入队列（弄脏结果）？这个jquery函数会立即启动请求，因为开始时间是动态声明的-不，你不能把它搞砸。参数也是一个对象，所以它不会影响向它添加自定义属性。简单的优点是！+1添加你自己的变量来保持对象的开始时间的技巧是基本java脚本，并且在创建没有jquery的ajax调用时也可以使用。这也不适用于重叠的ajax调用。

start\u time

将被覆盖。

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

async: false,