Остановка функции прокрутки от запуска несколько раз?

Question

Итак, у меня есть сценарий, который извлекает данные из базы данных и отображает его, когда пользователь приближается к нижней части страницы.

Проблема:

Когда пользователь достигает дна, скрипт должен возвращать только одну запись назад, но вместо этого, несколько запросов делаются, в результате чего все посты, которые будут тянет из базы данных в быстрый темп, который, в свою очередь, возвращает их в неправильном порядке.

Мой вопрос: есть ли кто-нибудь, кто знает, как остановить его от слияния и предотвратить рассылку статей?

Примечание:

Я не ищу, чтобы полностью вырезать AJAX запросы от когда-то один было сделано, так как этот сценарий является «бесконечной прокрутки», потянув статей по одному из базы данных, когда пользователь достигает дна.

Заранее благодарить, Богатый.

$(document).ready(function() {  
     $(window).scroll(function() { 
      if($(window).scrollTop() + $(window).height() > $(document).height() - 200) { 
       $('div#loadMoreArticles').show(function(){   
        $.ajax({ 
          url: "loadMoreArticles.php?lastArticle="+ $(".postedArticle:last").attr('id') , 
          success: function(html) { 
           if(html){  
            $("#postedArticle").append(html); 
            $('div#loadMoreArticles').hide();  
           } else { 
            $('div#loadMoreArticles').replaceWith("<p>There are no more articles.</p>"); 
           } 
          } 
        }); 
       }); 
      } 
     }); 
}); 

Answer 1

Попробуйте определения обработчика в качестве имени функции, используя .off() отделяться scroll события, перед $.ajax() вызовом scroll события прикрепить после $.ajax() завершает

function scroller() { 
     if($(window).scrollTop() + $(window).height() > $(document).height() - 200) { 
      $(this).off("scroll.ajax"); 
      $('div#loadMoreArticles').show(function(){   
       $.ajax({ 
         url: "loadMoreArticles.php?lastArticle="+ $(".postedArticle:last").attr('id') , 
         success: function(html) { 
          if(html){  
           $("#postedArticle").append(html); 
           $('div#loadMoreArticles').hide();  
          } else { 
           $('div#loadMoreArticles').replaceWith("<p>There are no more articles.</p>"); 
          }; 
          // setTimeout(function() { 
          $(window).on("scroll.ajax", scroller) 
          // }, 500) 
         } 
       }); 
      }); 
     } 
    } 

$(window).on("scroll.ajax", scroller); 

Answer 2

Надеется, что это помогает

$(document).ready(function() { 
    var AjaxRequestOn; 
    $(window).scroll(function() { 
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) { 
     $('div#loadMoreArticles').show(function() { 
     if (!AjaxRequestOn) { 
      AjaxRequestOn = $.ajax({ 
      url: "/", 
      success: function(html) { 

      } 
      }); 
     } 
     }); 
    } 
    }); 
}); 

Просто используйте переменный для установки Ajax запроса, когда первая Аякса устанавливается тогда, если пользователь снова прокручивать вверх и идет вниз, то переменные имеют некоторое значение, так что мы не следует повторять вызов (проверьте, не зациклился ли цикл перед вызовом ajax). Если переменная не определена, мы должны сделать вызов на сервер. поэтому это приводит только к одному вызову сервера.