Angular 请求防抖操作_js 搜索防抖 angular-优快云博客

本文介绍如何使用ngx-bootstrap UI库中的bs-sortable组件实现拖拽排序，并利用RxJS操作符debounceTime和distinctUntilChanged实现拖拽结束后再发送请求，减轻服务器压力。

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

使用ngx-bootstrap UI库中bs-sortable组件到达目的就是将每个模块可以进行拖拽

传送门：官网网址
该组件里面有个onChange事件，自我理解为拖动事件，每次拖动的时候数组中的数据自动改变它的顺序，但在onChange事件中打印该数组在这里插入图片描述
则发现他是实时的…郁闷
如果每次拖拽都发送一次请求就太昂贵了。服务器压力也很大最好是能等到用户停止拖拽时才发送请求。此时就可以用到请求防抖（使用 RxJS 的操作符实现）。

1. 引入相关的包

import {Subject} from 'rxjs/Subject';

2.声明变量

private dragDrop = new Subject<string>();

3.拖拽的方法

dropChange(data) {
	this.dragDrop.next(data);
}

4.请求防抖

ngOnInit() {
	this.dragDrop.pipe(debounceTime(500), distinctUntilChanged()).subscribe(data => {
			console.log(data);
		});
}

dragDrop 是一个序列，包含用户输入到搜索框中的所有值。它定义成了 RxJS 的 Subject 对象，这表示它是一个多播 Observable，同时还可以自行调用 next(value) 来产生值，除了把每个 dragDrop 的值都直接转发给 HttpClient
ngOnInit() 中的代码还通过下列两个操作符对这些搜索值进行管道处理：

debounceTime(500) - 等待，直到用户停止输入（这个例子中是停止 500ms）。
distinctUntilChanged() - 等待，直到搜索内容发生了变化。
这样，只有当用户停止拖拽和以前数据不一样的时候它才会传给服务，发送请求。