javascript - Endless Load on Scroll 或如何多次不触发事件

Question

我实现了一个加载功能，只要到达页面末尾就会触发该功能。它基本上可以工作，但是每当我向下滚动时，该事件都会被触发多次。有没有更好的方法来实现这个想法或不多次触发这个事件的方法？

这是我所做的：

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $.get("test", function(data){
             $("div.article:last").after(data);
});
            loading = false;

        }
    }
});
   $(document).ready(function() {
    $('#loaded_max').val(500);
});

谢谢！

Answer 1

你来做这件事：

$.get("test", function(data){
    $("div.article:last").after(data);
});
loading = false;

loading=false;位于您的回调$.get函数之外。这$.get是一个异步函数，这意味着。loading=false;直接在您之后执行，$.get而不是在您的 Ajax 调用准备好时执行。

如果你把你的回调放在loading=false;里面。$.get您不会同时有多个请求。

一次只获得 1 个请求的解决方案：

$.get("test", function(data){
    $("div.article:last").after(data);
    loading = false;
});

此外，我会在人们到达底部之前开始加载页面的下一部分，例如 400px。所以他们可以继续滚动，而不必等待您的请求准备好。我这样更流畅。