Angular 4 / 5 中的事件处理程序性能问题

Question

对不起，如果我的问题很愚蠢，但我们的应用程序面临延迟问题。KEYPRESS 事件处理程序是罪魁祸首。我们在整个应用程序中使用以下指令。它KeyPress通过HostListener. 按下键时，该指令使用正则表达式检查值，并preventDefault在条件为假时执行。

private regexMap = { // add your own
    '999': /^([0-9]){0,3}$/g,
    '9999': /^([0-9]){0,4}$/g,
    ...
    ...
}

@HostListener('keypress', [ '$event' ])
public nInput(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
        return;
    }
    this.pattern = this.regexMap[this.validationFormat];
    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.pattern)) {
        event.preventDefault();
    }
}

我不知道如何解决这个问题。会debounceTime解决这个问题吗？我不确定如何向此方法添加去抖动。请有人帮我解决这个问题。

Answer 1

修复了 DebounceTime 的问题:)刚刚在帮助主题的帮助下添加了去抖时间。基本上，当用户输入某些内容时，它会停止所有操作，然后将事件（按键按下的值）发送到主题并在主题去抖时间等待 300 毫秒，然后进行功能测试

    private keyPressed = new Subject();
    private subscription: Subscription;
    private pattern: RegExp;
    private regexMap = { // add your own
     '999': /^([0-9]){0,3}$/g,
     '9999': /^([0-9]){0,4}$/g,
      ...
      ...
   }
    private specialKeys: string[] = ['Backspace', 'Tab', 'End', 'Home'];

    constructor(private el: ElementRef) {
    }

    public ngOnInit() {
        this.subscription = this.keyPressed.pipe(debounceTime(300)).subscribe(
            (event) => this.checkRegExpression(event)
        );
    }

    public ngOnDestroy() {
        this.subscription.unsubscribe();
    }

    @HostListener('keypress', ['$event']) public nInput(event: KeyboardEvent) {
        event.preventDefault();
        event.stopPropagation();
        this.keyPressed.next(event);
    }

    private checkRegExpression(event) {
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }
        this.pattern = this.regexMap[this.validationFormat];
        const current: string = this.el.nativeElement.value;
        const next: string = current.concat(event.key);
        if (next && !String(next).match(this.pattern)) {
            event.preventDefault();
        }
    }