速率限制AJAX请求更新内容以避免重复
Rate-limiting AJAX requests for updating content to avoid duplicates
我试图通过检查用户是否接近底部来使用AJAX和JQuery动态获取帖子。服务器端位于GAE上的python中。
收听滚动:
this.config.window.on('scroll',this.loadContent);
1.检查与底部的距离
2.发送一个包含当前帖子数量的ajax请求,以检索下一个10
3.results.check=true表示服务器没有其他帖子可发送。
loadContent: function(){
// 1
if($(document).height() - $(window).height() - $(window).scrollTop() < 1000) {
var posts = $('.troll').children('div').length;
data = 'loadmore=True&offset=' + posts; //2
$.ajax({
url: '/',
type: 'POST',
data: data,
dataType: 'json',
success: function(results){
if (results.check === 'true'){ //3
$(window).unbind('scroll');
return;
}
Post.insert10Values(results);
}
});
};
},
insert10Values: function(results){
var update = Handlebars.compile($('#troll10').html()),
troll10update = update(results);
$('div.troll').append( troll10update );
}
这里的问题是,当快速滚动时,两个或多个请求被发送到服务器,我得到了重复的条目。我想对客户端进行费率限制。
设置一个标志loading=false。在发送请求之前,请检查标志。如果为false,则将标志设置为true并继续请求,否则忽略该事件。当结果到达时,显示它们并将标志设置回false。
问题的一部分是滚动事件会多次触发第二个
你可以通过以下方式限制任何函数调用:
var scrollTimer=false;
var delay=500; /* 1/2 second*/
$(window).on('scroll',function(){
if( scrollTimer){
clearTimeout( scrollTimer);
}
scrollTimer=setTimeout(function(){
/* run your code here*/
}, delay);
});
至于ajax,您可以存储上一次ajax调用的时间,并在进行新的ajax调用之前,根据现在与存储的时间设置最小差异
var lastAJAX=Date.now(), AJAXMin=5000;/* 5 seconds*/
function checkAJAXCalls(){
var now=Date.now(), diff=now-lastAJAX;
if( diff >= AJAXMin){
lastAJAX=now;
return true;
}else{
return false;
}
}
然后在发出请求之前运行if(checkAJAXCalls())
。可以修改概念以在$.ajax
的成功回调中更新lastAJAX
,也可以修改
jQuery.ajax
有一个名为beforeSend
的方法。它是在您的ajax调用之前执行的。您可以使用它来检查是否有其他请求正在进行中,如果有则取消呼叫。如果在beforeSend
函数中返回false,则不会触发ajax调用,因此不会有任何重复的内容。
$.ajax({
url: '/',
type: 'POST',
data: data,
dataType: 'json',
beforeSend: function() {
if (window.nextPageProcess) {
return false;
} else {
window.nextPageProcess = 1;
}
},
success: function(results){
if (results.check === 'true'){ //3
$(window).unbind('scroll');
return;
}
Post.insert10Values(results);
window.nextPageProcess = 1;
}
});
相关文章:
- javascript skrollr基于动态内容更新窗口高度
- 仅当javascript的新内容出现时,才每3秒更新一次javascript
- 如何在Ajax加载新内容时停止JavaScript执行
- 点击后,永久更改内容;悬停时,简要显示新内容
- 导致出现新内容块的标记(谷歌地图)
- CSS转换后用新内容替换空白
- 当用户到达页面右侧时加载新内容
- 如何使用jQuery显示新内容
- 使用 Javascript 在页面末尾附加新内容
- 如何在一个时间间隔后追加新的更新
- JavaScript内容更新
- jQuery弹出显示旧内容,而不是新内容
- 使用新项目更新KendoUI网格数据源
- 使用新值更新时出现数组问题
- JSON加载新内容后访问元素
- Webgrid需要使用MVC中的新内容进行更新
- 如何检查表中的新内容,然后更新浏览器选项卡标题
- 在创建/更新时,使用$state.go('main.myEntries'),但直到重新加载更新或新内容为
- 在更新地址字段时导航到新内容而不重新加载页面
- 当最小化页面上出现新内容时,如何更新选项卡的标题?