Javascript 限制AJAX更新内容请求的速率以避免重复

我试图通过检查用户是否接近底部，使用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 );
    }

loadContent:function（）{
// 1
if（$（文档）.height（）-$（窗口）.height（）-$（窗口）.scrollTop（）<1000）{
var posts=$（'.troll'）.children（'div'）.length；
data='loadmore=True&offset='+posts；//2
$.ajax（{
url:“/”，
键入：“POST”，
数据：数据，
数据类型：“json”，
成功：功能（结果）{
如果（results.check=='true'）{//3
$（窗口）。解除绑定（“滚动”）；
返回；
}
Post.insert10值（结果）；
}
});
};
},
insert10Values:函数（结果）{
var update=handlebar.compile（$（'#troll10'）.html（）），
更新=更新（结果）；
$（'div.troll'）.append（troll10update）；
}

---

这里的问题是，当快速滚动时，两个或多个请求被发送到服务器，我会得到重复的条目。我想对客户端进行评级限制。

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

---

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

---

部分问题是滚动事件每秒会触发多次

您可以通过以下方式限制任何函数调用：

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（））

。在

$的成功回调中，可以修改这个概念来更新
lastAJAX
。ajax

还有一个问题，那就是滚动事件每秒会触发很多次

您可以通过以下方式限制任何函数调用：

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（））

。在

$的成功回调中，可以修改这个概念来更新
lastAJAX
。ajax

还可以设置一个标志loading=false。发送请求之前，请检查标志。如果为false，则将标志设置为true并继续请求，否则忽略事件。当结果到达时，显示它们并将标志设置回false。

设置标志加载=false。发送请求之前，请检查标志。如果为false，则将标志设置为true并继续请求，否则忽略事件。当结果到达时，显示它们并将标志设置回false