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

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

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

所以最好是能等到用户停止输入时才发送请求。此时就可以用到请求防抖(使用 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请求

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

未完待续。。。

个人博客 蜗牛

hmoban主题是根据ripro二开的主题,极致后台体验,无插件,集成会员系统
自学咖网 » angular的input输入搜索防抖,避免keyup造成请求过于频繁,以及如何封装成input组件的指令