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 回答