Angular 5 在方法上使用 debounceTime答案

【问题标题】：Angular 5 use debounceTime on methodAngular 5 在方法上使用 debounceTime
【发布时间】：2018-03-07 11:37:58
【问题描述】：

我正在尝试在 Angular 5 函数上使用 debounceTime，但我不确定如何使用它。当我构建一个搜索功能时，我可以使用它，因为它绑定到对该输入值所做的更改，如下所示：

this.search
    .debounceTime(400)
    .distinctUntilChanged()
    .takeUntil(this.onDestroy)
    .subscribe((model) => {
        return this.filterArray(model);
    });

但是现在我想把它应用到一个函数中，这个函数从很多地方被调用，并通过http post向数据库发送一个事件，像这样：

private saveData(): void {
    this.http.post('event/url', data).takeUntil(this.onDestroy).subscribe((response: Response) => {
        // -
    }, error => {
        // -
    });
}

有没有办法像saveData().debounceTime() 那样做，或者我需要用其他方法吗？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

我不确定，但这样的事情可能会奏效：

$save: Subject<void> = new Subject<void>();

在您的构造函数或初始化中：

this.$save
  .debounceTime(400)
  .switchMap(() => this.http.post(...post params))
  .subscribe(..Do something);

你的保存方法：

saveData(){
    this.$save.next();
}

【讨论】：

【解决方案2】：

把这个放在这里

// "rxjs": "^6.2.0",
//import { Subject } from 'rxjs';
//import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
...
export class SomeClass {    
    ...
    $subject: Subject<void> = new Subject<void>();


    constructor() {
        this.$subject.pipe(debounceTime(2000), distinctUntilChanged());
    }

    onSomeMethod(event: string) {
        this.$subject.next(this.runMethod(event));
    }

    runMethod(event: any) {
        // do stuff
        console.log(event);
    }
    ...
}

【讨论】：

【解决方案3】：

// "rxjs": "^6.3.3"
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
...
export class SomeClass {    
    ...
    $subject: Subject<string> = new Subject<string>();


    constructor() {
        this.$subject.pipe(debounceTime(1000)).subscribe((event: string) => runMethod(event));
    }

    onSomeMethod(event: string) {
        this.$subject.next(event);
    }

    private runMethod(event: string) {
        // do stuff
        console.log(event);
    }
    ...
}

【讨论】：