了解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范围将在这里帮助。
棘手的部分是访问您在success
callbackbeforeSend
函数中声明的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'); } });
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