Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2 – Debouncing keyUp事件大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
如何去除在“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)">

大佬总结

以上是大佬教程为你收集整理的Angular 2 – Debouncing keyUp事件全部内容,希望文章能够帮你解决Angular 2 – Debouncing keyUp事件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。