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

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

未完待续。。。

个人博客 蜗牛