Debounce @HostListener事件

Question

我在Angular2中實現了一個簡單的無限滾動指令。 我使用@HostListener('window:scroll')來獲取滾動事件並解析$target中的數據。

問題是，對於每個滾動事件，所有內容都將被再次檢查，而不需要。

我檢查了離子infinite-scroll指令的靈感，但他們不使用@HostListener，他們需要更精細的控制，我猜。

我在搜索https://github.com/angular/angular/issues/13248時遇到了這個問題，但找不到任何我想做的事情。

我認爲如果我創建一個Observable，通過去抖動和推送（下一個）項目來訂閱它，我會達到我想要的行爲，但我無法做到這一點。

Answer 1

我會利用諸如抖法裝飾：

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

和按如下方式使用它：

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

Plunker Example