如何使用window.scroll jquery一次触发单击？

Question

这是我的js代码，用于从数据库加载更多帖子的按钮。

.getmore是按钮的类。 现在，我想进行无限滚动，以便用户无需单击该按钮。

所以我添加了window.scroll函数：

$('.getmore').trigger("click"); 

但一次点击3次。 手动单击该按钮时，它可以正常工作。 但是使用滚动触发器，它会获得三倍的效果。

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 300) {
            $('.getmore').trigger("click");
        }
    }); 

    $('body').on('click','.getmore',function(){
        var lastelement = $(this).attr('id');
        $.ajax({
            type: 'GET',
            url: 'getmore.php',
            data:'lastelement='+lastelement,
            beforesend: function(){
                $('.getmore').html('loading....');
            },       
            success: function(data){
                $('.getmore').remove();
                $('#recs') .append(data) ; 
            }
        });
    });
});

Answer 1

如MDN所述：

由于滚动事件可以以很高的速度触发，因此事件处理程序不应执行计算量大的操作，例如DOM修改。 相反，建议使用requestAnimationFrame，setTimeout或customEvent限制事件

他们提出的基本方法是检查事件状态的全局变量。 对于您的示例，您可以保存一个名为fetching的全局变量，该变量在用户滚动时设置为true ，而在success回调中完成新数据的获取后则设置为false 。 最后，如果fetching为true ，则不允许“单击” .getmore 。

阅读文档以获取更多信息： https : //developer.mozilla.org/en-US/docs/Web/Events/scroll

Answer 2

尝试这个 ：

 $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()){
            $('yourbuttonIDorClass').trigger('click');
        }
    });

Answer 3

遇到此类问题的典型方法是使用推论来排除导致问题的原因：。

排除.getmore类中有多少个元素。

console.log($('.getmore').length); 
//Add this line under the .trigger('click');

如果大于1，则可能是您的问题。

排除调用窗口滚动回调的次数。

console.log('Scroll called'); 
//Add this line at the start of your $(window).scroll function.

如果滚动被调用了3次，这可能是您的问题

检查您采用的事件委派方法不会引起任何奇怪的问题。

将$('body').on('click', '.getmore', function() {}替换$('.getmore').click(function() {}