javascript - 如何去抖 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