了解Ajax请求花了多长时间完成

找出特定$.ajax()请求花了多长时间的好方法是什么?

我想获取这些信息,然后将其显示在某个地方的页面上。

回答??::::

我是新来的JavaScript,如果你不想内联“成功”function,这是最好的,因为它将是一个更大的function,这是一个很好的方法来做到这一点? 我觉得我正在过分复杂的事情…:

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

Codemeit是正确的。 他的解决scheme看起来像下面使用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就绪响应

不幸的是,就我所知,没有办法把事件join队列的时间。 Event.timeStamp返回事件从队列中popup的时间,看到这个小提琴: 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(); } }); 

亚里士多德是正确的事件队列。 你可以做的是把你的时间戳创build放到你知道将尽可能接近AJAX请求的开始部分执行的代码中。

目前稳定版本的jQuery(写作时:2.2.2)有一个beforeSend键,它接受一个函数。 我会在那里做。

请注意,在JavaScript中,只要程序启动,所有声明在函数之外的全局范围variables都被初始化。 了解JavaScript范围将在这里帮助。

棘手的部分是访问您在successcallbackbeforeSend函数中声明的variables。 如果你在本地声明它(使用let ),你不能在该函数的范围之外轻松访问它。

下面是一个例子,它会给出稍微更准确的结果( 在大多数情况下需要注意! ),因为它声明了一个全局作用域variables( start_time ),这个variables可能与同一页面上的其他脚本交互不良,

我很想深入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)); } ]); 

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

您可以使用Firefox插件Firebug来检查AJAX请求和响应的性能。 http://getfirebug.com/或者你可以利用查尔斯代理或提琴手嗅探stream量,看看performance等。;

这是做到这一点的正确方法。

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

 makeRequest = function(){ // Set start time console.time('makeRequest'); $.ajax({ async : true, success : getRquestSuccessFunction(start_time), }); } getRquestSuccessFunction = function(start_time){ console.timeEnd('makeRequest'); return function(data, textStatus, request) { } } 

这会给出以毫秒为单位的输出,如makeRequest:1355.4951171875ms