减少AJAX发出的服务器请求 [英] Reduce server requests made by AJAX
问题描述
我有一个滑块组件，该组件也调用AJAX请求，以根据滑块也指向的值来更新表.
在我的本地服务器上，没有实现延迟功能似乎很好，但是由于我将代码部署到云服务上，因此我注意到，当用户处于运行状态时，发送给服务器的请求数量会产生大量的滞后滑动.
我当前的代码:
$( "#psi_slider" ).slider({
range: "min",
value:0,
min:0,
max:max_psi,
slide: function(event, ui) {
update_results(json, get_values());
}
});
有人可以建议我如何在请求之间实现计时器，即每秒发送一个请求吗?
这种情况与用户在字段上键入内容并且您希望根据用户类型来更新数据/提供内容的情况非常相似，但不一定每次都如此用户按下一个键.
有三种方法可以解决这种情况:
方法1:每当发生更改时就进行更新
这可能是一种可行的方法，当某些更改"表示用户按下了一个键"，但绝对不是，这意味着滑块移动了一点"，这就是您的情况.
...
whenSomethingChanges : function(){
updateData();
}
...
function updateData(){
// Make your ajax call
}
方法2:等到事情停止改变，然后再更新
也就是说，当用户停止键入或停止移动滑块一段时间后，请更新您的数据.对于滑块，此方法足以大大减少Ajax调用的数量.但是，这样做的明显缺点是，如果用户不停止移动物体，则他/她将看不到其动作的结果，并且可能会感到沮丧.
var timeout = 500; // half a second
var scheduler = new Scheduler(updateData, timeout);
...
whenSomethingChanges: function(){
scheduler.updateDataInAWhile();
}
...
function Scheduler(callback, timeout){
this.callback = callback;
this.timeout = timeout;
this.updateDataTimeout = null;
this.updateDataInAWhile = function(){
if(this.updateDataTimeout){
clearTimeout(this.updateDataTimeout);
}
var self = this;
this.updateDataTimeout = setTimeout(function(){
self.callCallback();
}, this.timeout);
};
this.callCallback = function(){
if($.isFunction(this.callback)){
this.callback();
}
}
}
function updateData(){
// Make your ajax call
}
方法3:在事情不断变化的同时定期更新
标题说明了一切.这将限制Ajax调用的频率，同时以连续的方式向用户提供反馈.
var timeout = 500; // half a second
var scheduler = new Scheduler(updateData, timeout);
....
whenSomethingChanges: function(){
scheduler.keepUpdating();
}
...
function Scheduler(callback, timeout) {
this.callback = callback;
this.timeout = timeout;
this.currentlyUpdating = false;
this.finalTimeout = null;
this.keepUpdating = function(){
if(!this.currentlyUpdating){
this.startPeriodicUpdate();
}
if(this.finalTimeout){
clearTimeout(this.finalTimeout);
}
var self = this;
this.finalTimeout = setTimeout(function(){
self.discontinueUpdates();
}, this.timeout);
};
this.startPeriodicUpdate = function(){
this.currentlyUpdating = true;
this.runPeriodicUpdate();
};
this.runPeriodicUpdate = function(){
if($.isFunction(this.callback)){
this.callback();
}
var self = this;
if(this.currentlyUpdating){
setTimeout(function(){
self.runPeriodicUpdate()
}, self.timeout);
}
};
this.discontinueUpdates = function(){
this.currentlyUpdating = false;
};
}
I have a slider component which calls an AJAX request to update a table based on the values the slider is pointing too.
On my local server, not implementing a delay function seemed fine, but since deploying my code onto a cloud service I've noticed there is a significant amount of lag generated by the amount of requests sent to the server when a user is sliding.
My current code:
$( "#psi_slider" ).slider({
range: "min",
value:0,
min:0,
max:max_psi,
slide: function(event, ui) {
update_results(json, get_values());
}
});
Could anyone advise how I could implement a timer between requests, i.e. send a request every second?
This scenario is very similar to that in which a user types on a field and you want to update data/provide as the user types, but not necessarily every time that the user presses a key.
There are three approaches to this situation:
Approach 1: update every single time that something gets changed
This can possibly be a doable approach when "something gets changed" means "the user presses a key" but definitely not when it means "the slider moves a tiny bit" which is your case.
...
whenSomethingChanges : function(){
updateData();
}
...
function updateData(){
// Make your ajax call
}
Approach 2: wait until things stop changing, then update
That is, when the user stops typing or stops moving the slider for some time, update your data. In the case of the slider this approach suffice to drastically reduce the amount of Ajax calls. However, it has the obvious downside that, if the user does not stop moving things around, he/she will not see the results of his/her actions and may become frustrated.
var timeout = 500; // half a second
var scheduler = new Scheduler(updateData, timeout);
...
whenSomethingChanges: function(){
scheduler.updateDataInAWhile();
}
...
function Scheduler(callback, timeout){
this.callback = callback;
this.timeout = timeout;
this.updateDataTimeout = null;
this.updateDataInAWhile = function(){
if(this.updateDataTimeout){
clearTimeout(this.updateDataTimeout);
}
var self = this;
this.updateDataTimeout = setTimeout(function(){
self.callCallback();
}, this.timeout);
};
this.callCallback = function(){
if($.isFunction(this.callback)){
this.callback();
}
}
}
function updateData(){
// Make your ajax call
}
Approach 3: update periodically while things keep changing
The title says it all. This will put a limit on the frequency Ajax calls while at the same time providing feedback to the user in a continuous manner.
var timeout = 500; // half a second
var scheduler = new Scheduler(updateData, timeout);
....
whenSomethingChanges: function(){
scheduler.keepUpdating();
}
...
function Scheduler(callback, timeout) {
this.callback = callback;
this.timeout = timeout;
this.currentlyUpdating = false;
this.finalTimeout = null;
this.keepUpdating = function(){
if(!this.currentlyUpdating){
this.startPeriodicUpdate();
}
if(this.finalTimeout){
clearTimeout(this.finalTimeout);
}
var self = this;
this.finalTimeout = setTimeout(function(){
self.discontinueUpdates();
}, this.timeout);
};
this.startPeriodicUpdate = function(){
this.currentlyUpdating = true;
this.runPeriodicUpdate();
};
this.runPeriodicUpdate = function(){
if($.isFunction(this.callback)){
this.callback();
}
var self = this;
if(this.currentlyUpdating){
setTimeout(function(){
self.runPeriodicUpdate()
}, self.timeout);
}
};
this.discontinueUpdates = function(){
this.currentlyUpdating = false;
};
}
这篇关于减少AJAX发出的服务器请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
