如何在无限滚动中避免多个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。

问题是当我向下滚动时，它会使多个（2）调用loadSubPage函数，并将重复的数据附加到Div。

由于我是JSP和JavaScript的新手，因此我在这里找不到问题。您能在这里指出我的问题吗？

Answer 1

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

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

在回调中，设置为false

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

Answer 2

我宁愿使用UnderScore的油门函数！

更清洁，非刺激性，您将重点放在应用程序的逻辑上，而不是进行一些回调的树立式 - 标准 - 杂物。