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

Question

很抱歉，如果我的问题很愚蠢，但我们的申请中遇到了延迟问题。 KEYPRESS事件处理程序是罪魁祸首。我们在整个应用程序中使用以下指令。它通过KeyPress检查HostListener。按下该键时，该指令使用regexp检查该值，如果condition为false，则执行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的问题:)只需在帮助主题中添加去抖时间。基本上当用户输入内容时它停止所有操作，然后将EVENT（按键值）发送到SUBJECT并在主题中去抖时间等待300ms然后再进行功能测试

    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();
        }
    }

Answer 2

假设您要继续使用按键事件，该事件将由用户触发每个按键

尝试优化正则表达式：

即从正则表达式中删除g和括号。像这样制作正则表达式 -

/^[0-9]{0,3}$/

有关更多技巧，请参阅：Regex Optimizations

网站流媒体验证特别糟糕（即验证文本，直播！）

1. 如果可以不进行流式验证检查，则使用焦点丢失事件，即在文本字段丢失焦点后运行代码。
2. 或者更好的是，像Angular文档建议Email Validation Demo，不纠正错误，只需指出它，用户将纠正它。