Javascript 发出http请求+；剑道场的变化

我有一个方法，每次一些输入文本被更改时都会调用它。（基本上是搜索）。
我想延迟post/get请求，所以若用户快速键入，则只会向服务器发送一个请求

我是这样想的：

public partnerFilterChange(value)
{
    if (this.partnersSubscriptions)
        this.partnersSubscriptions.unsubscribe();

    this.partnersSubscriptions = this.partnersService.list({ filter: value })
        .debounceTime(5000)
        .subscribe(partners =>
        {
            delete this.partnersSubscriptions;
            this.partners = partners;
        });
}

但它不起作用

Http请求立即执行，而不是在5秒后执行。我还尝试使用

delay

代替

debounceTime

编辑：

---

我正在使用，因此我无法控制函数调用，只能订阅http请求。

我在Angular 2应用程序中遇到类似问题，我将粘贴我的解决方案：

subscribeToSearchQueryChanges(){
        const sub = Observable.fromEvent(this.panelSuggestionBox.nativeElement, 'keyup')
            .debounceTime(300)
            .filter((kbE: KeyboardEvent) => {
                return !(kbE['code'] === 'Space' || kbE.key === 'ArrowDown' || kbE.key === 'ArrowUp' || kbE.key === 'Enter' || kbE.key === 'Tab' || kbE.key === 'Shift')
            })
            .map(() => _.trim(this.panelSuggestionBox.nativeElement.value) )
            .filter((term: string) => term.length > 2 )
            .switchMap((term: string) => this.suggestionService.getSuggestions(this.suggestionTypes, term))
            .subscribe((suggestions: Suggestion[]) => {
                this.suggestionsData = this.suggestionService.groupSuggestions(suggestions);
                this.toggleSuggestionList();
            }, err => {
                console.error('suggestions failed', err);
                this.removeSubscription(sub);
                this.subscribeToSearchQueryChanges();
            });

        this.addSubscription(sub);
    }

从'@angular/core'导入{Component，Output，HostListener，ChangeDetectionStrategy}；
从“rxjs/Observable”导入{Observable}；
从'@angular/forms'导入{FormGroup，FormControl}；
@组成部分({
选择器：“我的用户搜索”，
changeDetection:ChangeDetectionStrategy.OnPush，
模板：`
搜寻
`
})
导出类UserSearchComponent{
searchForm=newformgroup({
搜索：新表单控件（“”）
});
@Output（）search:Observable=this.searchForm.valueChanges
.map（form=>form.search）
.debounceTime（700）
.distinctUntilChanged（）；
@HostListener（'窗口：键控'，['$event']））
取消搜索（事件）{
如果（event.code==='Escape'）{
这个.searchForm.reset（）；
//this.searchControl.setValue（“”，{emitEvent:true}）；
}
}
}

用法 其中$event值是搜索词，当700ms过去且输入不相同时，将首先调用（search）

<my-user-search (search)="handleSearch($event)"></my-user-search>

---

根据我的评论。您不能直接使用

form.get（'fieldName'）。因为您使用的是剑道，所以valueChanges

。但是，您可以将从剑道收到的值推送到您自己的自定义可观察值，从而复制

valueChanges

的行为：

类AppComponent{
//这是您自己的，您将订阅的自定义观察。
//它将包含一个从剑道收到的过滤值流。
private _filterValues:Subject=newsubject（）；
构造函数（）{
//从自定义流开始，解盎司值，然后运行http查询
这是.\u filterValues.asObservable（）
.debounceTime（400）
.mergeMap（值=>this.partnersService.list（{filter:value}））
.subscribe（partners=>this.partners=partners）；
}
//每次字段值更改时，剑道都会调用此方法。
handleFilter（值）{
//在自定义流中推送值。
this.\u filterValues.next（值）；
}
}

注意。此代码假定

This.partnersService.list（）

返回一个可观察的值

---

使用此代码，每次更新字段时，都应该刷新合作伙伴列表，并应用解Bounce。（我还没有测试代码，您可能需要根据自己的用例对其进行调整。）

使用

switchMap

搜索过滤器。您需要重新构造代码，以便

debounceTime（）

操作符位于发出筛选值的可观察对象和发出HTTP请求的可观察对象之间。类似于

this.filter.valueChanges.debounceTime（400）.mergeMap（filter=>this.partnersService.search（term））

。看，你总是可以把从剑道收到的变化推送到你自己的、自定义的可观察的。如果你想消除发射值的影响，它们必须被包装在一个可观察的物体内。@AngularFrance:谢谢-只是一个小问题。我无法使用form.valueChanges，因为值未更改。下拉菜单上的事件（向下键）在内部处理，在选择项目时更改表单值，而不是在搜索时更改。

form.valueChanges

仅适用于原始角度字段。就像我说的，因为你在使用剑道，你需要把从剑道那里得到的值推到你自己的可观测值中。请看下面我的答案。只是一个小问题。我无法使用form.valueChanges，因为值未更改。下拉菜单上的事件（向下键）在内部处理，表单值在选择项时更改，而不是在搜索时更改。

<my-user-search (search)="handleSearch($event)"></my-user-search>