如何对 angular 2 中的观察者函数进行去抖动？

Question

我正在尝试监听 angular 2 中的 onScroll 事件，并且我创建了以下有效的代码，但是接下来每个滚动事件都会调用并且它会影响浏览器性能。我希望 observer.next 函数是非常轻量级的，并且订阅者的去抖动就足够了，但要么它不是很轻量级，要么我做错了什么。有人可以帮我有效地去抖动吗？

import {Component, Renderer, OnInit} from "@angular/core";
import {Subject, Observable, Observer} from "rxjs";
@Component({
selector: 'heading',
templateUrl: './heading.component.html',
styles: [require('./heading.component.scss')]
})

export class HeadingComponent implements OnInit {

observable: Observable<Event>;

constructor(private renderer: Renderer) {
    this.observable = new Observable<Event>(
        (observer: Observer<Event>) => {
            this.renderer.listenGlobal('window', 'scroll', (evt: Event) => {
                observer.next(evt);
        })
        }
    );
}

ngOnInit(): void {
    this.observable
        .debounceTime(400)
        .subscribe(
            (evt: Event) => console.log('next event' + evt),
            (err: string) => console.error(err),
            () => console.info('done')
        )
    }
}

Answer 1

在您的代码中 .debounceTime(400) 将其替换为 .debounce(400)。

查看文档：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md

Answer 2

我发现正确的做法实际上如下（感谢来自 angular gitter 的 Dzmitry 和 Ryan）

constructor() {
    this.observable = Observable.fromEvent(window, 'scroll')
        .debounceTime(400)
        .map(() => window.scrollY)
}

如何对 angular 2 中的观察者函数进行去抖动？

How to debounce the observer function in angular 2?

javascript

observable

rxjs

typescript

angular