Question

我用这个在我的自定义wordpress tempate中进行无限滚动，我把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请求完成之前调用触发器函数？

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

Answer 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>

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

2 个答案: