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

【问题标题】：How to avoid multiple JavaScript function calls in Infinite Scrolling如何避免无限滚动中的多个 JavaScript 函数调用
【发布时间】：2012-10-25 08:37:43
【问题描述】：

我正在使用这个 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 也会在页面加载事件中被调用。

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

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

【问题讨论】：

这段代码出现了另一个问题。（我不确定是否将其作为单独的问题发布）此函数调用在 FireFox 上工作得非常好，但在 Chrome 中却不行。它只调用该函数一次，不再调用它。我没有收到任何对话框询问是否“停止生成消息框” 你们也可以帮我解决这个问题吗？ :)
您绝对应该将此作为一个新问题发布。还包括代码的相关部分。
感谢 Pumbaa80 的建议 :)

标签： javascript jquery ajax jsp jquery-events

【解决方案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;

【讨论】：

... 并在回调中重置该布尔值。

【解决方案2】：

我宁愿使用Underscore's throttle 函数！

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

【讨论】：

为什么要在单个变量起作用时包含另一个库？
@Amberlamps 因为它更干净（因为它更易于阅读），因为您可以在代码中添加一些东西，而该库中的代码经过充分测试，并且因为该库可以为您节省大量代码.
也没有任何骇人听闻的属性。我刚刚查看了 Underscore 的源代码，他们自己使用了一个控制变量 throttling。
@Amberlamps 隐藏在 Underscore 的命名空间中，从而减少了 bug-propone 代码。
这只是您如何实施解决方案的问题。