Angular + rxjs 实现某个方法防抖

最新推荐文章于 2025-08-24 16:03:41 发布

原创最新推荐文章于 2025-08-24 16:03:41 发布 · 774 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #前端

Angular 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何利用RxJS的debounceTime和distinctUntilChanged操作符来优化搜索框功能，防止用户快速输入时频繁调用接口。通过设置300ms的延迟时间，确保输入稳定后再调用getList方法查询数据，提高了用户体验和接口效率。

场景：

监听输入变化从而触发搜索方法或某个方法的搜索框、输入框等

// 引入rxjs等包

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

举例：

search()方法会调用getList()这个方法向后台查询数据

// 预置方法

/*
调用后台查询数据接口
*/
getList(){ 
   ***
   ***
}


// 未添加防抖前，每次调用search()都会调用getList()

search(){
  this.getList();
}


//添加防抖后，调用search()后，每300ms才会调用一次getList()

private inputStream = new Subject<string>();


ngOnInit() {

  this.inputStream.pipe(debounceTime(300), distinctUntilChanged()).subscribe(() =>     
    this.getList()); 
}


search(){
  this.inputStream.next()
}