CODEWITHSUNDEEP
javascriptjqueryjquery-events
Dranreb
Dranreb

Reputation: 313

Disable Jquery/JS function

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

}

Upvotes: 0

Views: 35

Answers (3)

Yaroslav Zaika
Yaroslav Zaika

Reputation: 124

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

}

Upvotes: 1

Firemen26
Firemen26

Reputation: 1045

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

Upvotes: 1

Hannan Ayub
Hannan Ayub

Reputation: 408

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

Upvotes: 1

Related Questions