Angular 4/5中的事件處理程序性能問題

Question

很抱歉，如果我的問題很愚蠢，但我們的申請中遇到了延遲問題。 KEYPRESS事件處理程序是罪魁禍首。 我們在整個應用程序中使用以下指令。 它通過HostListener檢查KeyPress 。 按下該鍵時，該指令使用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}$/

有關更多技巧，請參閱：正則表達式優化

網站流媒體驗證特別糟糕（即驗證文本，直播！）

1. 如果沒有流式驗證檢查，則使用焦點丟失事件，即在文本字段丟失焦點后運行代碼。
2. 或者更好的是，像Angular文檔建議電子郵件驗證演示 ，不糾正錯誤，只需指出它，用戶將糾正它。