Question

我正在使用最新的JQuery。问题是如果用户滚动得太快，脚本会连续两次触发。如果用户以正常速度或非常慢的速度滚动，则脚本正常工作。我在页面底部有js。我在调用函数时添加了一个超时，但它只是等待超时，然后重复两次脚本。重复不会一直发生。我有设置在滚动高度的-10px调用函数。此外，即使延迟加载gif，我尝试放置加载gif的任何尝试都不起作用。有没有办法防止这种情况发生？

<body>
    <div class="contentholderwrap"></div>

    <div id="dataresult"></div>

</body>

<script type="text/javascript">
    $(document).ready(function(){
        function lastPostFunc(){
            var endid = $(".contentholderwrap:last").attr("id");
            if (endid != "1000000000000") {
                $.post("main.php?lastid="+$(".contentholderwrap:last").attr("id"), function(data) {
                    if (data != ""){
                        $(".contentholderwrap:last").after(data);
                    }
                    $('#dataresult').empty();
                });
            }
        };

    $(window).scroll(function(){
        if ($(window).scrollTop() >= $(document).height() - $(window).height() -10 ){
            setTimeout(lastPostFunc, 500);
        }
    });
});
</script>

Answer 1

你的超时不起作用，因为它只是延迟了函数调用，但每次发生.scroll事件时它仍然排队。如果您想实现延迟，则需要使用setTimeout()来阻止在一段时间内发出多个请求：

var timerid = null;
$(window).scroll(function(){
   if (timerid === null &&
       $(window).scrollTop() >= $(document).height() - $(window).height() -10 ){
         lastPostFunc();
         timerid = setTimeout(function() { timerid = null; }, 500);
   }
});

或者，您可以更新lastPostFunc()函数，以便在以前的Ajax请求仍在进行时它不会执行任何操作：

 var ajaxInProgress = false;
 function lastPostFunc(){
     if (ajaxInProgress) return;

     var endid = $(".contentholderwrap:last").attr("id");
     if (endid != "1000000000000") {
         $.post("main.php?lastid="+endid, function(data) {
             if (data != ""){
                $(".contentholderwrap:last").after(data);
             }
             $('#dataresult').empty();
             ajaxInProgress = false;
         });
         ajaxInProgress = true;
     }
 }

（第三种选择是承认无限滚动可能真的很烦人，所以请改用“加载更多”按钮/链接。）

如何防止JQuery脚本在自定义无限滚动脚本中重复

1 个答案: