找出完成 Ajax 请求所需的时间

IT技术 javascript jquery xmlhttprequest
2021-02-05 14:35:15

找出特定$.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;
    }
}
6个回答

@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 新手。这会使用唯一的 start_time 变量，还是会被异步请求覆盖？
2021-03-15 14:35:15
这不适用于多个请求，拒绝投票
2021-03-15 14:35:15
您需要创建一个请求数组，在ajax 的beforeSend() 函数中推送start_time - 然后在success() 函数中计算时间差。
2021-03-23 14:35:15
window.performce.now()如果您想要更多粒度，请使用
2021-04-06 14:35:15

这是正确的做法。

$.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/

它的简单性很棒！+1添加自己的变量以保持对象的开始时间的技巧是基本的javascript，并且在没有jquery的情况下创建ajax调用时也可以使用。
2021-03-30 14:35:15
start_time这里是否与 ajax 有某种特殊/相关，或者您可以像这样在 ajax 对象中简单地声明您喜欢的任何键吗？如果是这样那真的很酷，我没想到……！
2021-04-02 14:35:15
这个 jquery 函数会立即启动请求，并且由于开始时间是动态声明的 - 不，您不会把它搞砸。参数也是一个对象，所以它不会影响向它添加自定义属性。
2021-04-03 14:35:15
还有一些保证在这里事件队列明智吗？我的意思是 - 我们是否知道start_time以这种方式声明实际上会将该变量初始化为请求开始之前的指令，或者在请求开始之前是否有其他一些东西可能会潜入队列（弄脏结果） ?
2021-04-09 14:35:15

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

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

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

网址：

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

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

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

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

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

这是一个示例，它会给出稍微更准确的结果（警告：在大多数情况下！）这也很危险，因为它声明了一个全局范围的变量（start_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));
    }
]);
如果在节点中使用GLOBAL.. 再次...你不是在生产中使用此，任何地方！
2021-04-05 14:35:15

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

您可以利用 Firefox 插件 Firebug 来检查 AJAX 请求和响应的性能。http://getfirebug.com/ 或者您可以使用 Charles 代理或 Fiddler 来嗅探流量以查看性能等。

其它你可能感兴趣的问题
上一篇JavaScript 中匿名函数的 removeEventListener 下一篇如何从 WebAssembly 函数返回 JavaScript 字符串