Question

我正在使用此Java Script函数创建一个具有无限滚动功能的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事件中调用。

问题是，当我向下滚动时，它会对 loadSubPage 函数进行多次（2次有时3次）调用，并将重复数据附加到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's throttle功能！

更干净，非黑客，你会专注于你的应用程序的逻辑，而不是做一些回调 - 布尔 - 重置 - 魔术。

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

2 个答案: