angular的input输入搜索防抖,避免keyup造成请求过于频繁,以及如何封装成input组件的指令

微信扫一扫,分享到朋友圈

angular的input输入搜索防抖,避免keyup造成请求过于频繁,以及如何封装成input组件的指令

一、常见的搜索功能

<input nz-input [(ngModel)]="paramsChannelVo.name" (keyup)="getData(paramsChannelVo.name)" placeholder="系统名称" />

input的keyup事件把每次按键弹起都发送给了 getData() 方法。

这样一个绑定就造成了,每输入一个字符就会进行一次搜索,如果使用中文输入法,最后回车写入中文时,又有可能造成不会进行搜索

所以最好是能等到用户停止输入时才发送请求。此时就可以用到请求防抖(使用 RxJS 的操作符实现)。

二、如何使用防抖功能

1、component.js中引入 rxjs/Subject

import {Subject} from 'rxjs/Subject';
import {debounceTime, distinctUntilChanged} from 'rxjs/operators';

2、声明变量

private getDataTerms = new Subject<string>();

这个string通常是[(ngModel)]绑定的值的类型

3、keyup绑定的getData方法

getData(value: string) {
this.getDataTerms.next(value);
}

4、请求防抖

ngOnInit(): void {
this.getDataTerms
.pipe(
// 请求防抖 300毫秒
debounceTime(300),
distinctUntilChanged())
.subscribe(term => {
// 此处进行httpClient的请求
// term是用户输入的值
this.getDataList();
});
}
getDataList(){
// 此处进行httpClient的请求
}

5、说明

ngOnInit() 中的代码还通过下列两个操作符对这些搜索值进行管道处理:

  • debounceTime(300) – 等待,直到用户停止输入(这个例子中是停止 300ms)。
  • distinctUntilChanged() – 等待,直到搜索内容发生了变化。

getDataTerms 是一个序列,包含用户输入到搜索框中的所有值。 它定义成了 RxJS 的 Subject 对象,这表示它是一个多播 Observable,同时还可以自行调用 next(value) 来产生值

这样,只有当用户停止了输入且搜索值和以前不一样的时候,搜索值才会传给服务,发送请求,避免每次输入字符都进行 httpClient请求

三、将防抖功能定义为一个指令

未完待续。。。

个人博客 蜗牛

微信扫一扫,分享到朋友圈

angular的input输入搜索防抖,避免keyup造成请求过于频繁,以及如何封装成input组件的指令

利用树莓派和闲置硬盘,搭建起家中的个人网盘

上一篇

针对有色人种 美一零售商秘密部署人脸识别系统达8年

下一篇

你也可能喜欢

angular的input输入搜索防抖,避免keyup造成请求过于频繁,以及如何封装成input组件的指令

长按储存图像,分享给朋友