jQuery停止无限滚动触发，直到加载下一页答案

【问题标题】：jQuery stop infinite scroll triggering untill next page is loadedjQuery停止无限滚动触发，直到加载下一页
【发布时间】：2016-03-29 09:16:38
【问题描述】：

我使用它在我的自定义 wordpress 模板中进行无限滚动，我将执行 ajax 的按钮放在页面底部并且我需要它，然后我使用它在用户快要触发时触发该按钮滚动到页面底部：

<script>
  // Infinite scroll script
  $(function() {
    $('.st-content').on('scroll', function() {  
      if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        $('#pbd-alp-load-posts a').trigger('click');
      }
    });
  });
</script>

我面临的问题是事件在 ajax 请求完成之前一直触发..导致事件崩溃。有没有办法阻止在上一个 ajax 请求完成之前调用触发函数？

【问题讨论】：

你能在这里添加对ajax函数的调用吗？
这是：jsfiddle.net/bpusxpmq/2

标签： jquery ajax post infinite-scroll

【解决方案1】：

你可以尝试在ajax调用成功时绑定你的事件：

  $('.pbd-alp-placeholder-' + pageNum).load(nextLink + ' .filter',
      function() {
          $('.st-content').on('scroll', function() {
              if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
                  $('#pbd-alp-load-posts a').trigger('click');
              }
          });
      });

【讨论】：

【解决方案2】：

试试这个;)

使用全局变量来跟踪当前动作；

<script>
  // Infinite scroll script

  /* allow loading data */
  var canLoad = true;
  $(function(){
    $('.st-content').on('scroll', function(){
      /* chack for last ajax request finished or not */
      if($(window).scrollTop() + $(window).height() > $(document).height() - 100 && canLoad){
        /* Disable next load till current in progress. */
        canLoad = false;
        $('#pbd-alp-load-posts a').trigger('click');
      }
    });
  });

  /**
   * @todo set canLoad = false in $.ajax complete
   */

  $.ajax({
    /* your rest ajax options here */
    complete:function(){
      canLoad = true;
    }
  });
</script>

【讨论】：