Disable Jquery/JS function

Question

I have a function that loads a fresh new data from the database whenever the user scrolls and hits the bottom of the page (like Facebook). Now the problem is that, when the user scrolls to the bottom, scrolls back up a little, then scrolls back down to the bottom again: this calls the function twice right? Therefore loads the new posts twice.

What I like to do is to temporarily disable the function whenever it is activated, loads up the new data, then afterwards, enables the function again.

Here's my code:

function scroll_load() {
   $('#maincontainer').bind('scroll', function(){
     If($(this).scrollTop()+$(this).innerHeight()>=$(this)[0].scrollHeight){
       //CODE THAT TEMPORARILY DISABLES THE SCROLLING FUNCTION UNTIL AJAX LOADS SUCCESSFULLY here--



       //loads the new posts through ajax
       $.ajax({
          type: 'GET',
          url: "getpost.php",
          data: {'id':my_id},

          success: function(data){
             $('#dataview').append(data);
          }
       });
     }
   });

}

Search for "debouncing".

Barmar
– Barmar

2017-07-24 06:11:16 +00:00
Commented Jul 24, 2017 at 6:11 — Barmar
– Barmar, Commented Jul 24, 2017 at 6:11

Yaroslav Zaika · Accepted Answer · 2017-07-24 06:30:17Z

1

function scroll_load() {

   var throttled = false;
   var scrollDelay = 350;

   $('#maincontainer').bind('scroll', function(){
     If($(this).scrollTop()+$(this).innerHeight()>=$(this)[0].scrollHeight){
       //CODE THAT TEMPORARILY DISABLES THE SCROLLING FUNCTION UNTIL AJAX LOADS SUCCESSFULLY here--


       if (!throttled) {

        throttled = true;
        //loads the new posts through ajax
       $.ajax({
          type: 'GET',
          url: "getpost.php",
          data: {'id':my_id},

          success: function(data){
             $('#dataview').append(data);
          }
       });

        //  we don't allow to our function to execute more than once every X milliseconds
        setTimeout(function (){
          throttled = false;
        }, scrollDelay);
      }
     }
   });

}

edited Jul 24, 2017 at 6:30

answered Jul 24, 2017 at 6:02

Yaroslav Zaika

1241 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hannan Ayub · Accepted Answer · 2017-07-24 06:00:15Z

I hope this helps

   var isScrolled = false;
            function scroll_load() {
if(isScrolled == false){
           $('#maincontainer').bind('scroll', function(){
             If($(this).scrollTop()+$(this).innerHeight()>=$(this)[0].scrollHeight){
               //CODE THAT TEMPORARILY DISABLES THE SCROLLING FUNCTION UNTIL AJAX LOADS SUCCESSFULLY here--



               //loads the new posts through ajax
               $.ajax({
                  type: 'GET',
                  url: "getpost.php",
                  data: {'id':my_id},

                  success: function(data){
                     $('#dataview').append(data);
                  }
               });
             }
           });
        IsScrolled = true;
}
        }

and you can use a timeout function for setting the IsScrolled value again to False

Firemen26 · Accepted Answer · 2017-07-24 06:06:08Z

1

You can use a flag. When you call the function the flag will be 1 and when you receive the returned data, flag will be 0 like that:

var flag = 0;
function scroll_load() {

   $('#maincontainer').bind('scroll', function(){
     if(flag) return;
     else {

       flag = 1;

       If($(this).scrollTop()+$(this).innerHeight()>=$(this)[0].scrollHeight){
       //loads the new posts through ajax
       $.ajax({
          type: 'GET',
          url: "getpost.php",
          data: {'id':my_id},

          success: function(data){
          flag = 0;
          $('#dataview').append(data);
      }
   });
 }
   });
}

answered Jul 24, 2017 at 6:06

Firemen26

1,05512 silver badges21 bronze badges

Collectives™ on Stack Overflow

Disable Jquery/JS function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related