0

私は次のようなjQueryで無限スクロールスクリプトを実行しています：

$(window).scroll(function(){
  if($(window).scrollTop() >= $(document).height() - $(window).height() - 50){

    // If we have not loaded all pages yet
    if($('#feed').data('pagesloaded') != 0){
      var toload = $('#feed').data('pagesloaded') + 1;

      $.post("/feed/" + toload, { 'ignore': showed_posts_id }, function(html){
        if(html){
          $('#feed')
            .data('pagesloaded', toload)
            .append(html);
        }else{
          // If all pages are loaded, disable infinite scrolling
          $('#feed').data('pagesloaded', 0);
        }
      });

    }
  }
});

ここ50で、はイベントがトリガーされる下部からのピクセルオフセットです。ただし、ページの一番下までスクロールすると、オフセットが50から0になると関数が何度もトリガーされ、すべてのページが一度に読み込まれます。

イベントを$（window）.ajaxStart（）と.ajaxStop（）にバインドする手法について聞いたことがありますが、アプリケーションで多くの非同期ajaxが実行されているため、無限スクロールが妨げられます。これは私が話していることです：

var ajaxRunning = false;
$(window).ajaxStart(function () {
  ajaxRunning = true;
}).ajaxStop(function () {
  ajaxRunning = false;
});

$ .postがまだ続いているかどうかをチェックする単純なバイナリセマフォを配置することを考えましたが、それが悪い習慣かどうか疑問に思っています。それを行うための最良の方法は何でしょうか？

4

1 に答える 1

1

$(window) に単純なデータフラグを設定することで、最終的にそれを行いました。誰かがそれが悪い実践だと思っていて、それを行うより効果的な方法を知っているなら、私はそれを聞いてうれしいです!

$(window).scroll(function(){
  if($('#feed').data('pagesloaded') != 0 && !$(window).data('infinite-scroll-async')){
    if($(window).scrollTop() >= $(document).height() - $(window).height() - 50){

      // Locks the function
      $(window).data('infinite-scroll-async', true);

      var toload = $('#feed').data('pagesloaded') + 1;

      $.post("/feed/" + toload, { 'ignore': showed_posts_id }, function(html){

        if(html){
          $('#feed')
            .data('pagesloaded', toload)
            .append(html);
        }else{
          // If all pages are loaded, disable infinite scrolling
          $('#feed').data('pagesloaded', 0);
        }

      }).complete(function(){

        // Unlocks the function
        $(window).data('infinite-scroll-async', false);

      });

    }
  }
});
于 2012-12-18T07:57:58.547 に答える