為什么在使用setTimeout（），Observable.timer或Observable.interval（）時，Angular 5應用程序會阻止UI？

Question

我正在嘗試制作自己的輸入搜索組件，但是以某種方式，當我開始在輸入文本中鍵入內容時，UI會阻塞，直到超時到達要執行的時間為止。 我開始檢查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

我想到了。 它與動態菜單的呈現有關。 我的意思是我沒有使用最佳方法來處理它。