backbone.js 取消绑定scrollout上的事件-推荐吗?

von4xj4u  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(135)

我的网站是建立在 Backbone.js 上的。它有一个基于提要的用户界面,这意味着经常有大量的内容显示在提要中。粗略地说,大约30个事件绑定到每个项目。
向下滚动几页后,它会变得迟钝。
取消绑定已滚动出的项目,并在滚动入时重新绑定,这样做有意义吗?
是什么原因导致速度缓慢?

aydmsdu9

aydmsdu91#

很难说这种缓慢是因为事件处理程序,还是仅仅因为浏览器无法处理页面上大量的DOM节点,或者是其他原因。
这里有一个快速的解决方案,可以取消委托不在当前视窗中的视图的事件。它并不完全适用于生产,但是应该可以帮助你测试事件处理程序是否是性能问题的原因。
Working JSFiddle here,同时检查浏览器控制台)

var View = Backbone.View.extend({

  onScroll: function() {

    var wasInView = this.isInView;
    var isInView = this.checkIsInView();

    if(wasInView === true) {
      if(!isInView) {
         this.undelegateEvents(); 
      }
    } 
    else if(wasInView === false) {
      if(isInView) {
        this.delegateEvents();
      }
    }
    else {
      //first pass
      if(!isInView) {
        this.undelegateEvents();
      }
    }

    this.isInView = isInView;
  },

  checkIsInView: function() {
    var $el = this.$el,
        top = $el.offset().top,
        bottom = top + $el.height(),
        windowTop = $(window).scrollTop(),
        windowBottom = windowTop + $(window).height();

    return ((bottom <= windowBottom) && (top >= windowTop));
  },

  render: function () {

    //rendering code here...

    if(!this.lazyScroll) {
      //wait for scroll events to stop before triggering scroll handler
      this.lazyScroll = _.debounce(_.bind(this.onScroll, this), 50);
      $(window).bind('scroll', this.lazyScroll)
               .bind('resize', this.lazyScroll); 
    }

    return this;
  },

  remove: function() {
    if(this.lazyScroll) {
      $(window).unbind('scroll', this.lazyScroll)
               .unbind('resize', this.lazyScroll); 
      delete this.lazyScroll;
    }
    Backbone.View.prototype.remove.apply(this, arguments);
  }
});

相关问题