ワンタイムトリガーを行うにはwindow.scroll jqueryをクリックしますか？

Question

これは、データベースからより多くの投稿を読み込むボタンのjsコードです。

.getmoreは、ボタンのクラスです。今、私はその無限のスクロールをして、ユーザーがそのボタンをクリックする必要がないようにしたいと思います。

だから私はwindow.scroll機能を追加しました：

$('.getmore').trigger("click"); 

を、それは一度に3回をクリックします。ボタンを手動でクリックするとうまく動作します。しかし、スクロールトリガでは同じことが3回起こります。

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     if ($(window).scrollTop() + $(window).height() > $(document).height() - 300) { 
      $('.getmore').trigger("click"); 
     } 
    }); 

    $('body').on('click','.getmore',function(){ 
     var lastelement = $(this).attr('id'); 
     $.ajax({ 
      type: 'GET', 
      url: 'getmore.php', 
      data:'lastelement='+lastelement, 
      beforesend: function(){ 
       $('.getmore').html('loading....'); 
      },  
      success: function(data){ 
       $('.getmore').remove(); 
       $('#recs') .append(data) ; 
      } 
     }); 
    }); 
}); 

Answer 1

このような問題の典型的なアプローチは、控除を使用して問題の原因を排除することです。

クラスのいくつの要素が存在するかを除外します。

console.log($('.getmore').length); 
//Add this line under the .trigger('click'); 

これが問題である可能性があります。

ウィンドウスクロールコールバックが何回呼び出されたかを除外します。

console.log('Scroll called'); 
//Add this line at the start of your $(window).scroll function. 

スクロールが3回呼び出された場合、これはあなたが撮影したイベントの委任アプローチは、任意の奇妙な問題を引き起こしていないチェック

あなたの問題である可能性があります。

MDNのよう$('.getmore').click(function() {}

Answer 2

で$('body').on('click', '.getmore', function() {}を置き換え状態：

をスクロールイベントが高速で発射できるので、イベントハンドラ は、DOM 修正として計算コストが高いオペレーションを実行するべきではありません。代わりに、彼らが提案されている基本的なアプローチは、イベントの状態をチェックし、グローバル変数である requestAnimationFrameの、setTimeoutメソッドまたはcustomEvent

を使用してイベントを絞ることをお勧めします。たとえば、ユーザーがスクロールするときにtrueに設定されたfetchingというグローバル変数を保存し、successコールバックで新しいデータがフェッチされたときにfalseに戻すことができます。最後に、をがtrueの場合は「クリック」しないでください。

詳細については、マニュアルを読む：私はそれは典型的であることがわかり https://developer.mozilla.org/en-US/docs/Web/Events/scroll