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