我有一个用于列表后端过滤的输入控件。 我已经为输入控件的 keyup 事件设置了一个可观察对象。
我不知道该怎么做,如果用户按下回车键,立即处理请求。
因此去抖动的计时器应该依赖于去抖动可观察值的发射值。我假设 Debounce 不会重新评估其流发射参数,但我尝试使用外部变量但没有成功 - 无论如何,这看起来像是一个黑客。 另外,如果有一种不那么棘手的方法来处理转义(无需外部变量),请为我指出正确的方向!
另一个问题是,按住某个键重复输入字符会使此代码滞后,因为我正在 keyup 事件中获取控制键(例如 esc)。 可以在不丢失按键的情况下对其进行限制吗?
或者如果存在合适的 Angular 事件而不是 keyup,我应该 Hook 一些 Angular 事件吗?
let lastValue: string = '';
let debounceTime: number = 550;
Observable.fromEvent(ctrl.nativeElement, 'keyup')
.takeUntil(this.destroyedSignal)
.map((key:any)=>{
if (key.keyCode == 27 || key.keyCode == 13){
this.getColumnDef(fieldName).showFilterInput = false;
debounceTime = 0;
if (key.keyCode === 27) {
ctrl.nativeElement.value = lastValue;
}
} else {
debounceTime = 550;
}
return key;
})
.debounceTime(debounceTime)
.filter((key:any)=>this.isValidFilterKey(key.keyCode)) // no api call for control chars
.distinctUntilChanged()
.subscribe((key) => {
//send filtervalue to a behaviorsubject that triggers api call ..
}
最佳答案
不确定您的所有代码应该做什么,但我可以帮助您听Enter。
let lastValue: string = '';
let debounceTime: number = 550;
const keyUp$ = Observable.fromEvent(ctrl.nativeElement, 'keyup').share(); // 1
keyUp$
.takeUntil(this.destroyedSignal)
.do(_ =>{ // 2
if (key.keyCode == 27 || key.keyCode == 13){
this.getColumnDef(fieldName).showFilterInput = false;
debounceTime = 0;
if (key.keyCode === 27) {
ctrl.nativeElement.value = lastValue;
}
} else {
debounceTime = 550;
}
})
.debounceTime(debounceTime)
.filter((key:any)=>this.isValidFilterKey(key.keyCode)) // no api call for control chars
.distinctUntilChanged()
.merge(keyUp$.filter((key: any) => key.keyCode == 13)) // 3
.subscribe((key) => {
//send filtervalue to a behaviorsubject that triggers api call ..
}
- 我们需要多次订阅同一个可观察对象。这样做时,我们在所有订阅者之间共享可观察的内容。我们将这个共享的可观察量存储在一个单独的变量中。
- 我将
map
更改为do
。您会得到相同的结果,但您可以更清楚地表达您的意图。map
用于更改值,do
用于副作用,例如。 “可观察之外的东西” - 在这里,我们将“旧”可观察值与一个新可观察值合并,该新可观察值只会在 keyUp 上发出 Enter 信号。由于它是在
debounceTime
之后,因此不会被反跳并立即向subscribe
发出信号
我希望这会有所帮助。您将 Rx 与一些常规命令式代码混合在一起,因此很难看出总体意图。
关于javascript - rxJs 过滤器列表,具有基于 angular4 中发出的值的去抖功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46444479/