Question

我在javascript中有一个脚本，可以在页面向下滚动时加载更多信息。问题是，当我向下滚动脚本时，执行两次，我得到两次甚至更多相同的结果。

我希望每次向下滚动时执行一次脚本，而不是每次执行两次甚至更多次。

这是剧本：

$(window).scroll(function(){
			
        var lastID = $('.load-more').attr('lastid');
        if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
            $.ajax({
                type:'POST',
                url:'getdata.php',
                data:'id='+lastID,
                beforeSend:function(html){
                    $('.load-more').show();
                },
                success:function(html){
                    $('.load-more').remove();
                    $('#list').append(html);
                }
            });
        }
    });

Answer 1

$(window).one('scroll',function(){ ...}
..

解释＆＃34;一个＆＃34;来自jquery docs：每个事件类型的每个元素最多执行一次处理程序。 http://api.jquery.com/one/ 函数将仅在您第一次滚动时执行，第二次或任何后续时间都不会发生任何事情。

Answer 2

var timeout;

$(window).scroll(function() {
  clearTimeout(timeout);  
  timeout = setTimeout(function(){

    var lastID = $('.load-more').attr('lastid');
    if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
        $.ajax({
            type:'POST',
            url:'getdata.php',
            data:'id='+lastID,
            beforeSend:function(html){
                $('.load-more').show();
            },
            success:function(html){
                $('.load-more').remove();
                $('#list').append(html);
            }
        });
    }
 }, 200);
});

第二次滚动执行将触发取消函数延迟执行并启动另一个不会被任何内容取消的执行。

Answer 3

您可以等到上一个加载完成后再加载新的。

var isLoading

$( window ).on( 'scroll', onScroll )

function onScroll() {

  if( isLoading ) return

  isLoading = true

  $.ajax({
    success: function() {

      isLoading = false

      // Add content, etc...

    }
  })

}

Answer 4

试试这个

var counter  = 0;


 $(window).scroll(function(){

        var lastID = $('.load-more').attr('lastid');
        if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0 && counter < 1){
            counter++;
            $.ajax({
                type:'POST',
                url:'getdata.php',
                data:'id='+lastID,
                beforeSend:function(html){
                    $('.load-more').show();
                },
                success:function(html){
                     // reset counter to 0 after you get your results
                    counter = 0;
                    $('.load-more').remove();
                    $('#list').append(html);
                }
            });
        }
    });

Answer 5

再添加一个测试，以便在加载程序显示时忽略滚动

if (
    $(window).scrollTop() === $(document).height() - $(window).height()

    && +lastID !== 0

    // fancy way to say "Is this element in the DOM" w/ good performance
    && $.contains(document.documentElement, $('.load-more')[0])
) {

  // then load more content

}

Mini-Rant ：

我将==更改为===，并明确强制lastID为一个号码，这也允许将!=更改为!==。

当它没有提供任何明显的好处时，避免自动类型强制是一个好习惯。这种语言功能没有任何内在的坏处。但是，采取合理的步骤来避免它时，您可以使代码更容易理解，并且更容易让jit编译器进行优化。当我在自己的代码中找到类似==的内容时，它的外观是自我记录的，让我知道我故意利用类型强制来实现有目的的效果（其他节省1次小按键）。

注意：检查元素存在的所选方法来自SLaks在this answer的评论中提供的jsPerf。

滚动javascript问题的脚本

5 个答案: