Почему мое приложение Angular 5 блокирует пользовательский интерфейс при использовании setTimeout (), Observable.timer или Observable.interval ()?

Question

Я пытаюсь создать свой собственный компонент поиска ввода, но каким-то образом, когда я начинаю набирать текст во входном тексте, пользовательский интерфейс блокируется до тех пор, пока не истечет время ожидания.Я начинаю проверять документацию angular о его внутреннем поведении, чтобы проверить, не делаю ли я что-то не так или, может быть, что-то другое.Я увидел, что у rxjs есть класс Observable, в котором я мог использовать timer () и interval, и оба не работали должным образом.

Это код, который я написал для компонента ввода-поиска:

• Компонент HTML

<input type="text" (keyup)="onInputChange($event)" class="form-control" />

• компонент .ts

import { Component, OnInit, Input, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "app-input-search",
  templateUrl: "./input-search.component.html",
  styleUrls: ["./input-search.component.css"]
})
export class InputSearchComponent implements OnInit {
  @Output()
  onChange: EventEmitter<{ event: any; value: string }> = new EventEmitter();
  @Input() milliSeconds: number;

  timeoutHandler: any;

  constructor() {}

  ngOnInit() {}

  onInputChange(e) {
    if (this.milliSeconds && this.milliSeconds > 0) {
      if (this.timeoutHandler) {
        clearTimeout(this.timeoutHandler);
      }
      this.timeoutHandler = setTimeout(
        () => this.onChange.emit({ event: e, value: e.target.value }),
        this.milliSeconds
      );
    } else {
      if (this.timeoutHandler) {
        clearTimeout(this.timeoutHandler);
      }
      this.onChange.emit({ event: e, value: e.target.value });
    }

    return false;
  }
}

Answer 1

Я понял это.Это было как-то связано с рендерингом динамического меню.Я имею в виду, что я не использовал лучший подход, чтобы справиться с этим.