Désactiver la fonction Jquery/JS

Question

J'ai une fonction qui charge une nouvelle donnée à partir de la base de données chaque fois que l'utilisateur fait défiler et atteint le bas de la page (comme facebook). Maintenant, le problème est que, lorsque l'utilisateur fait défiler vers le bas, défile un peu en arrière, puis redescend en bas à nouveau: cela appelle la fonction deux fois à droite? Charge donc les nouveaux messages deux fois. Ce que je veux faire est de désactiver temporairement la fonction quand elle est activée, charge les nouvelles données, puis active à nouveau la fonction.

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

} 

Merci!

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

} 

Answer 2

J'espère que cette aide

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

et vous pouvez utiliser une fonction de délai d'attente pour régler la valeur IsScrolled à nouveau sur False

Answer 3

Vous pouvez utiliser un drapeau. Lorsque vous appelez la fonction du drapeau sera 1 et lorsque vous recevez les données renvoyées, le drapeau sera de 0 comme ça:

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