Entprellen @HostListener-Ereignis

Question

Ich implementiere eine einfache Infinite-Scroll-Direktive in Angular2. Ich verwende @HostListener('window:scroll'), um das Bildlaufereignis abzurufen und die Daten von der $target zu analysieren.

Die Frage ist, für jedes Scroll-Ereignis wird alles noch einmal ohne Notwendigkeit überprüft.

Ich überprüfte die ionische infinite-scroll Direktive für Inspiration, aber sie verwenden nicht @HostListener, sie brauchen eine genauere Kontrolle, denke ich.

Ich landete auf dieses Problem bei der Suche https://github.com/angular/angular/issues/13248 aber konnte keine Möglichkeit finden, was ich will.

Ich denke, wenn ich ein Observable erstellen, abonnieren Sie es mit Entprellen und push (next) Elemente, ich werde das Verhalten erreichen, das ich will, aber ich bin nicht in der Lage, das zu tun.

Answer 1

würde ich debounce Methode Dekorateur wie nutzen:

export function debounce(delay: number = 300): MethodDecorator { 
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { 
    let timeout = null 

    const original = descriptor.value; 

    descriptor.value = function (...args) { 
     clearTimeout(timeout); 
     timeout = setTimeout(() => original.apply(this, args), delay); 
    }; 

    return descriptor; 
    }; 
} 

und es verwenden, wie folgt:

@HostListener('window:scroll', ['$event']) 
@debounce() 
scroll(event) { 
    ... 
} 

Plunker Example