jQuery stop無限スクロールトリガー次のページがロードされるまで

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>