防抖和节流的区别:
防抖:是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
场景:
在进行搜索操作时,有个下拉框的筛选条件,用户选择后调接口进行查询,存在用户选择后在loading状态下,用户再次进行选择操作,导致查询的结果跟筛选条件不一致,影响用户体验。
解决方案:在用户调接口查询之前,将上一次接口未返回的情况直接取消,使用最新的筛选条件进行搜索。
components.js
private searchTimer: Subscription;// 设置一个变量来对调接口的操作进行记录
search(){
this.searchTimer.unsubscribe(); // 对上一次的接口取消订阅之后,再次调接口
this.searchTimer = this.service.listProject(e).subscribe(data => {
this.finishData = this.finishData.concat(data.list);
this.finishPageable = data.pageable;
this.finishLoading = false;
});
}
防抖和接口文章参考: