为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
AngularJS

一、常见的搜索功能

<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请求

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

未完待续。。。

个人博客 蜗牛

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消