禁用 Jquery/JS 功能

Question

我有一个函数，每当用户滚动并点击页面底部（如 Facebook）时，它就会从数据库中加载新数据。现在的问题是，当用户滚动到底部时，向上滚动一点，然后再次向下滚动到底部：这调用了两次函数，对吗？因此加载新帖子两次。

我喜欢做的是在激活时暂时禁用该功能，加载新数据，然后再次启用该功能。

这是我的代码：

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

}

Answer 1

希望对您有所帮助

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

并且您可以使用超时函数将 IsScrolled 值再次设置为 False

Answer 2

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 3

您可以使用旗帜。当您调用该函数时，标志将为 1，当您收到返回的数据时，标志将为 0，如下所示：

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

禁用 Jquery/JS 功能

Disable Jquery/JS function

javascript

jquery

jquery-events