Home/ Questions/Q 7608445
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T00:54:56+00:00

I’m using the latest JQuery. The problem is if the user scrolls too fast

  • 0

I’m using the latest JQuery. The problem is if the user scrolls too fast the script fires twice in a row. If the user scrolls at normal speeds or very slowly, the script works normally. I have the js at the bottom of the page. I added a timeout when calling the function, but all it does is wait for the timeout and then repeats the script twice. The repeating doesn’t happen all the time. I have the setting to call the function at -10px of the scroll height. Also, any attempt I’ve made to put a loading gif doesn’t seem to work, even with a delay on loading the gif. Is there a way to prevent this from happening?

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your timeout didn’t work because all it did was delay the function call, but it still queued one up every time the .scroll event happened. If you want to implement a delay you need to use setTimeout() to prevent more than one request within a set period of time:

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

    Alternatively you could update your lastPostFunc() function so that it won’t do anything if the previous Ajax request is still in progress:

     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;
     }
 }

    (A third option is to admit that infinite scroll can be really annoying, so use a “Load more” button/link instead.)

    • 0