[英]Why is my Angular 5 app blocking the UI when using either setTimeout(), Observable.timer or Observable.interval()?
I'm trying to make my own input search component, but somehow when I start typing within the input text the UI blocks until the timeout reaches the time to be executed. 我正在尝试制作自己的输入搜索组件,但是以某种方式,当我开始在输入文本中键入内容时,UI会阻塞,直到超时到达要执行的时间为止。 I start checking the angular's documentation about its internal behavior to check if I was doing something wrong or maybe figure something else out. 我开始检查angular的有关其内部行为的文档,以检查我做错了什么还是发现其他问题。 I saw that rxjs has the Observable class where I could use timer() and interval and both didn't work as expected. 我看到rxjs具有Observable类,可以在其中使用timer()和interval,但两者均未按预期工作。
This is the code I have written so far for the input-search component: 到目前为止,这是我为输入搜索组件编写的代码:
<input type="text" (keyup)="onInputChange($event)" class="form-control" />
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;
}
}
I figured it out. 我想到了。 It had something to do with the rendering of a dynamic menu. 它与动态菜单的呈现有关。 I mean I wasn't using the best approach to handle it. 我的意思是我没有使用最佳方法来处理它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.