如何避免无限滚动中的多个 JavaScript 函数调用

Question

我正在使用此 JavaScript 函数创建具有无限滚动功能的 JSP 页面。

<script language="javascript" type="text/javascript">

var count = 0;

window.onload = loadSubPage;

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    alert("load appLeadershipSubView function calling");
        loadSubPage();
    }
});

function loadSubPage()
{
    alert("load appLeadershipSubView called");
        $.ajax({
        cache: false,
        url: 'appLeadershipSubView.do?count=' + count,
        async : true,
        beforeSend: function(){
        },
        success: function(html){
            alert("success event");
            $('#mainDiv').append(html);
            count++;
        },
        complete: function(){
        }
    }
    );
} 

</script> 

---

如您所见，我正在调用loadSubPage函数将appLeadershipSubView页面中的 html 内容附加到#mainDiv中。 并且loadSubPage也在页面 Load 事件中被调用。

问题是当我向下滚动时，它会多次（2 次，有时 3 次）调用loadSubPage函数并将重复数据附加到 div 中。

由于我是 JSP 和 Javascript 的新手，所以我无法弄清楚这里的问题。 你能指出我这里的问题吗？

Answer 1

添加一个布尔值以确保没有活动请求。 在发出请求之前检查它是否处于活动状态。

var isActive = false;
$(window).scroll(function(){
    if  (!isActive && $(window).scrollTop() == $(document).height() - $(window).height()){
    isActive = true;

在回调中，将 isActive 设置为 false

success: function(html){
    $('#mainDiv').append(html);
    isActive = false;

Answer 2

为此，我宁愿使用Underscore 的节流功能！

更简洁、更简洁，您将专注于应用程序的逻辑，而不是执行一些回调布尔重置魔术。