Question

我正在尝试使用JQuery和下划线在主干JS中实现滚动事件。在初始化函数中，我在下面添加以下行：

 _.bindAll(this, 'filter_list');
 $(window).scroll(this.filter_list);

其中filter_list是我试图从中获取数据库中下50个条目的数据的函数。

页面第一次显示来自DB的100条记录。在页面的滚动底部，调用filter_list函数，该函数具有从数据库中提取下50个条目的逻辑。

滚动事件在滚动条位于页面底部时发生，但是滚动事件被多次调用，而不是一次调用filter_list，最终导致多次从DB中获取相同数据。添加相同的结果将更新到该页面，即多次显示相同的50条记录。

我尝试以其他方式注册事件，但没有用。另外，如果任何人都可以在主干JS中解释滚动事件和绑定机制，那就太好了，我在互联网上没有任何好东西。

预先感谢

Answer 1

每次滚动条移动时都会触发scroll event，您需要自己完成所有提取逻辑。这是一个主意：

var MyView = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, 'filter_list');
    // also good idea to debounce
    this.filter_list = _.debounce(this.filter_list, 300);
    // Keep internal fetching state
    this.isFetching = false;
    $(window).scroll(this.filter_list);  
  },

  filter_list: function() {
    if (this.scrollHitPageBottom() && !this.isFetching) {
      this.isFetching = true;
      this.fetchDBEntries()
          .finally(function() { this.isFetching = false });
    }
  },

  ... 
})

骨干JS滚动事件处理

1 个答案: