javascript - rxJs过滤器列表基于基于angular4中的发射值进行去抖动

我有一个用于列表后端过滤的输入控件。
我为输入控件的keyup事件设置了一个可观察的对象。

我无法弄清楚该怎么做是如果用户按下Enter键立即处理该请求。

因此，去抖动的计时器应取决于去抖动的可观察值的发射值。我认为Debounce不会在流发射时重新评估其参数，但是我尝试使用外部变量进行了尝试，但没有成功-无论如何，这似乎是一种技巧。
另外，如果没有更好的方法来处理转义（没有外部变量），请指出正确的方向！

另一个问题是，由于我正在进行keyup事件以获取控制键（例如esc），因此按住键重复输入字符会使该代码滞后。
可以在不松动按键的情况下限制它吗？

或者如果存在合适的事件而不是键盘输入，我应该挂接到某个角度事件吗？

                    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 ..
    }

我们需要多次订阅相同的可观察对象。这样做时，我们在所有订户之间共享可观察的东西。我们将此共享的Observable存储在单独的变量中。
我将map更改为do。您会得到相同的结果，但是您可以更清楚地说明自己的意图。 map用于更改值，do用于副作用，例如。 “可观察范围之外的东西”
在这里，我们将“旧的”可观察到的与新的合并，它将仅在keyUp for Enter上单独使用。与debounceTime之后一样，它不会被去抖动并立即发出subscribe信号


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