Debounce @HostListener olayı

Question

Angular2'de basit bir sonsuz kaydırma yönergesi uyguluyorum. Kaydırma olayını almak ve verileri $target'dan ayrıştırmak için @HostListener('window:scroll') kullanıyorum.

Soru, her kaydırma olayı için, her şey bir gereklilik olmadan tekrar kontrol edilecektir.

İlham almak için iyonik infinite-scroll yönergesini kontrol ettim, ancak @HostListener kullanmıyorlar, sanırım daha ayrıntılı bir kontrole ihtiyaçları var.

Bu konuya https://github.com/angular/angular/issues/13248 numaralı telefondan arama yaparken ulaştım ama istediğimi yapmak için herhangi bir yol bulamadık.

Gözlemlenebilir bir yapı oluşturursam, ona karşı çıkma ve itme (sonraki) öğelere abone olursam, istediğim davranışa ulaşırım, ancak bunu yapamıyorum.

Answer 1

ben gibi debounce yöntemi dekoratör kaldıraç olacaktır:

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; 
    }; 
} 

ve aşağıdaki gibi kullanılır:

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

Plunker Example