Angular + rxjs 实现某个方法防抖

clearlove_lwc

于 2022-12-24 11:22:25 发布

阅读量735

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular.js 前端

本文链接：https://blog.youkuaiyun.com/clearlove_lwc/article/details/128426861

Angular 专栏收录该内容

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：

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

// 引入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()
}