javascript - rxJs 过滤器列表，具有基于 angular4 中发出的值的去抖功能

Question

我有一个用于列表后端过滤的输入控件。我已经为输入控件的 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 .. 
                    }

Answer 1

不确定您的所有代码应该做什么，但我可以帮助您听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 .. 
    }

1. 我们需要多次订阅同一个可观察对象。这样做时，我们在所有订阅者之间共享可观察的内容。我们将这个共享的可观察量存储在一个单独的变量中。
2. 我将 map 更改为 do。您会得到相同的结果，但您可以更清楚地表达您的意图。 map 用于更改值，do 用于副作用，例如。 “可观察之外的东西”
3. 在这里，我们将“旧”可观察值与一个新可观察值合并，该新可观察值只会在 keyUp 上发出 Enter 信号。由于它是在 debounceTime 之后，因此不会被反跳并立即向 subscribe 发出信号

我希望这会有所帮助。您将 Rx 与一些常规命令式代码混合在一起，因此很难看出总体意图。