angular 重复点击事件的防抖处理_js 点击防抖 angular

防抖和节流的区别：

防抖：是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。

场景：

在进行搜索操作时，有个下拉框的筛选条件，用户选择后调接口进行查询，存在用户选择后在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;
    });
 
}

防抖和接口文章参考：

性能提速：debounce（防抖）、throttle（节流／限频） - 蒲公英tt - 博客园