我如何衡量一个AJAX请求加载时间，并显示加载面板？ [英] How do I measure a loading time of an AJAX request and display a loading panel?
问题描述
我这里有一个AJAX请求有时可以处理一个非常大的JSON对象。我想显示加载面板，看起来像这样（45％）：
我的问题是，我似乎无法衡量服务器多久会过程中从AJAX发送的JSON对象。
下面是我的AJAX请求：
$。阿贾克斯（{
网址：./home/sumbit_json，
键入：POST，
数据： {
json_data：json_data，
用户：用户，
入门：入门
}，
数据类型：JSON，
成功：功能（数据）{
如果（data.status == FALSE）{
警报（交易失败）;
} 其他 {
警报（交易成功）;
}
} //阿贾克斯形式的成功，函数结束
错误：函数（XHR，状态，errorThrown）{
的console.log（错误：+ errorThrown）;
的console.log（状态：+状态）;
console.dir（XHR）;
}，
}）;
$。阿贾克斯（{
网址：./home/sumbit_json，
键入：POST，
//这将请求到服务器之前运行
beforeSend：函数（）{
//这个变量可能需要的Ajax请求外设置
//只是用一些跟踪时间
时间=新的日期（）;
}，
数据： {
json_data：json_data，
用户：用户，
入门：入门
}，
数据类型：JSON，
成功：功能（数据）{
如果（data.status == FALSE）{
警报（交易失败）;
} 其他 {
警报（交易成功）;
//找出了多长时间:)
警报（新的日期（） - 时间）;
}
} //阿贾克斯形式的成功，函数结束
错误：函数（XHR，状态，errorThrown）{
的console.log（错误：+ errorThrown）;
的console.log（状态：+状态）;
console.dir（XHR）;
}，
}）;
也许你可以开始发送就可以了多长时间才能到服务器到数据库中的数据。开始跟踪过程的平均值，然后设置进度条，收于任何存储的平均值是在服务器上的数据库，你开始请求之前。当然，如果它完成，只是加快了进度条到最后。
您可以通过测试它在浏览器中多次与不同的限制设置扩展这个prediction。然后在数据库上的速度范围创建平均值。
因此，工作流程： 1.时间要求的网络速度X的长度 2.把当时在数据库 3.做计时另一个请求 4.计算平均与数据库和更新数据库值的值 5.重复1-4几次在不同的网络速度/延迟 6.现在你有平均执行时间是个好主意，发送请求到得到的平均时间在数据库中的用户的当前速度/延迟到你的服务器 7.设置进度条到第6步中的平均时间内完成。 8.当请求完成后，更新的平均值在数据库中，以该真实场景。
应该只得到更多，更准确的随着时间的推移。
祝你好运！
I have here an AJAX request which can sometimes deal a very large json object. I want to display a loading panel which looks like this (in 45%):
My problem is that I can't seem to measure how long the server is gonna process the json object sent from the AJAX.
Here is my AJAX request:
$.ajax({
url: './home/sumbit_json',
type: 'POST',
data: {
json_data: json_data,
user: user,
entry: entry
},
dataType: 'json',
success: function(data) {
if (data.status == false) {
alert("transaction failed");
} else {
alert("transaction successful");
}
}, // End of success function of ajax form
error: function(xhr, status, errorThrown) {
console.log("Error: " + errorThrown);
console.log("Status: " + status);
console.dir(xhr);
},
});
$.ajax({
url: './home/sumbit_json',
type: 'POST',
// this will run before the request to server
beforeSend: function(){
// this variable may need to be set outside of ajax request
// just use something to track time
time = new Date();
},
data: {
json_data: json_data,
user: user,
entry: entry
},
dataType: 'json',
success: function(data) {
if (data.status == false) {
alert("transaction failed");
} else {
alert("transaction successful");
//figure out how long it took:)
alert(new Date() - time);
}
}, // End of success function of ajax form
error: function(xhr, status, errorThrown) {
console.log("Error: " + errorThrown);
console.log("Status: " + status);
console.dir(xhr);
},
});
Maybe then you could start sending the data on how long it take to the server into a database. Start tracking the average of the process and then set the progress bar to finish at whatever the stored average value is in the database on the server before you begin the request. Of course if it finishes, just speed up the progress bar to the end.
You could extend this prediction by testing it many times with different throttling settings as found in Chrome. Then create average values in for the speed ranges on the database.
So the workflow: 1. time the length of a request at internet speed X. 2. put that time in the database 3. do another request with timing 4. calculate average with the value in the database and update database value 5. repeat 1-4 several time on different internet speed/latencies 6. now that you have a good idea of average execution times, send a request to get the average time in the database for the users current speed/latency to your server 7. set progress bar to complete within the average time found in step 6. 8. when request is done, update the average in the database to this real scenario.
Should just get more and more accurate over time.
Good luck!
这篇关于我如何衡量一个AJAX请求加载时间，并显示加载面板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
