Angular 2 – Debouncing keyUp事件

发布时间：2020-12-17 07:34:09 所属栏目：安全来源：网络整理

导读：如何去除在“keyUp”事件中调用的函数？这是我的代码：我的功能 private handleSearch(searchTextValue: string,skip?: number): void { this.searchTextValue = searchTextValue; if (this.skip === 0 || typeof skip === "undefined") { this.skip = 0;

如何去除在“keyUp”事件中调用的函数？

这是我的代码：

我的功能

private handleSearch(searchTextValue: string,skip?: number): void {
    this.searchTextValue = searchTextValue;
    if (this.skip === 0 || typeof skip === "undefined") {
        this.skip = 0;
        this.pageIndex = 1;
    } else {
        this.skip = skip;
    }
    this.searchTextChanged.emit({ searchTextValue: searchTextValue,skip: this.skip,take: this.itemsPerPage });
}

我的HTML

<input type="text" class="form-control" placeholder="{{ 'searchquery' | translate }}" id="searchText" #searchText (keyup)="handleSearch(searchText.value)">

我想要实现的是,在用户停止输入后,handleSearch会被调用一段时间.

我发现我可以使用lodash的_debounce(),但我还没有找到如何将它放在我的keyUp事件上.

您可以创建一个rxjs / Subject并在keyup上调用.next()并使用您想要的debounceTime订阅它.

我不确定这是否是正确的方法,但它有效.

private subject: Subject<string> = new Subject();

ngOnInit() {
  this.subject.debounceTime(500).subscribe(searchTextValue => {
    this.handleSearch(searchTextValue);
  });
}

onKeyUp(searchTextValue: string){
  this.subject.next(searchTextValue);
}

HTML：

<input (keyup)="onKeyUp(searchText.value)">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!