Using requestAnimationFrame in angular2

Question

I want to implement infinite scroll in angular2, which

• automatically removes the DOM from the viewport.
• uses requestAnimationFrame instead of onscroll.

I noticed above was implemented using Mithriljs, which is available in the link below. I am confused about how to use requestAnimationFrame and build the ScrollListener class in angular2. Please suggest?

https://github.com/flarum/core/blob/master/js/lib/utils/ScrollListener.js

https://github.com/flarum/core/blob/master/js/forum/src/components/PostStream.js

PS: Sorry for my English. I am not a native speaker of English.

Answer 1

,

class RafQueue {
  currentFrameId: number;
  constructor(public callback: Function, public frames: number) { this._raf(); }
  private _raf() {
    this.currentFrameId = DOM.requestAnimationFrame(timestamp => this._nextFrame(timestamp));
  }
  private _nextFrame(timestamp: number) {
    this.frames--;
    if (this.frames > 0) {
      this._raf();
    } else {
      this.callback(timestamp);
    }
  }
  cancel() {
    DOM.cancelAnimationFrame(this.currentFrameId);
    this.currentFrameId = null;
  }
}

https://github.com/angular/angular/issues/6904 ( , )

Answer 2

:

index.html!

<script src="https://npmcdn.com/angular2@2.0.0-beta.17/es6/dev/src/testing/shims_for_IE.js"></script>

!