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

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

javascript jquery html css

Javascript 如何防止JQuery脚本在自定义无限滚动脚本中重复,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用最新的JQuery。问题是如果用户滚动太快，脚本将连续触发两次。如果用户以正常速度或非常慢的速度滚动，则脚本工作正常。我在页面底部有js。我在调用函数时添加了一个超时，但它所做的只是等待超时，然后重复脚本两次。这种重复并非总是发生。我已设置为在滚动高度的-10px处调用该函数。此外，我试图加载gif的任何尝试似乎都不起作用，即使加载gif有延迟。有没有办法防止这种情况发生 <body> <div class="contentholderwrap"><

我正在使用最新的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>

您的超时不起作用，因为它所做的只是延迟函数调用，但每次.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;
     }
 }

第三种选择是承认无限滚动确实很烦人，所以改用“加载更多”按钮/链接。

您的超时不起作用，因为它所做的只是延迟函数调用，但每次.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;
     }
 }

第三种选择是承认无限滚动确实很烦人，所以改用“加载更多”按钮/链接。

好吧，这样就完全停止滚动了。向下滚动时，不会发生任何事情。我在Firefox中使用firebug进行调试，但没有发现任何错误。您使用了第一次更改超时还是第二次更改ajax？你能把你的更新代码的副本放在我能看到的地方吗，例如，在或上？你有一个额外的，在lastpost函数的末尾。滚动时，它会忽略计时器延迟。您在scroll函数中使用了函数，该函数立即调用这些函数。删除时，永远不会调用函数。所以我想我没有耽搁吗？对不起，第一个代码似乎可以防止重复代码。延迟选项似乎根本不起作用。同时使用这两个选项，仍然没有延迟，但到目前为止，也没有重复。哦，你在滚动函数中有===，我把它改为==。延迟也起作用。好东西。谢谢。好吧，这完全停止滚动。向下滚动时，不会发生任何事情。我在Firefox中使用firebug进行调试，但没有发现任何错误。您使用了第一次更改超时还是第二次更改ajax？你能把你的更新代码的副本放在我能看到的地方吗，例如，在或上？你有一个额外的，在lastpost函数的末尾。滚动时，它会忽略计时器延迟。您在scroll函数中使用了函数，该函数立即调用这些函数。删除时，永远不会调用函数。所以我想我没有耽搁吗？对不起，第一个代码似乎可以防止重复代码。延迟选项似乎根本不起作用。同时使用这两个选项，仍然没有延迟，但到目前为止，也没有重复。哦，你在滚动函数中有===，我把它改为==。延迟也起作用。好东西。谢谢