Angular中如何实现变量防抖保存 避免每次点击都向服务器发请求

首先修正原有代码的小问题：你当前把quantity作为参数传入点击函数属于值传递，函数内修改的参数不会同步到组件的全局quantity属性，我们先把quantity改为组件类属性，不需要通过点击事件传参。

以下提供两种可直接复用的实现方式：

方式1：使用Angular自带RxJS实现（推荐） #

Angular默认集成RxJS，用debounceTime操作符实现逻辑更规范，可自动处理流的生命周期：

修改后的ts代码 #

import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, skip } from 'rxjs/operators';

@Component({
  // 保留你原有组件的配置即可
})
export class YourComponent implements OnDestroy {
  // 计数器改为组件全局属性
  public quantity = 0;
  // 定义防抖处理的流
  private saveSubject = new Subject<number>();
  // 流订阅实例，用于销毁时释放资源
  private saveSubscription = this.saveSubject.pipe(
    skip(1), // 跳过初始化时的第一次空触发
    debounceTime(2000) // 配置2秒防抖
  ).subscribe(async (latestQuantity) => {
    await this.save(latestQuantity);
  });

  // 加按钮点击逻辑
  clickPickPlus() {
    this.quantity++;
    this.saveSubject.next(this.quantity);
  }

  // 减按钮点击逻辑
  clickPickMinus() {
    // 可自定义计数器下限，比如不能小于0
    if (this.quantity > 0) {
      this.quantity--;
    }
    this.saveSubject.next(this.quantity);
  }

  // 保留你原有保存逻辑
  async save(quantity: number) {
    // 原有调用接口保存的代码
  }

  // 组件销毁时释放资源避免内存泄漏
  ngOnDestroy() {
    this.saveSubscription.unsubscribe();
    this.saveSubject.complete();
  }
}

修改后的html代码 #

<button class="button button-primary" (click)="clickPickPlus()">+</button>
{{ quantity }}
<button class="button button-primary" (click)="clickPickMinus()">-</button>

方式2：原生setTimeout实现（无需额外依赖） #

如果你不想引入RxJS操作符，用原生定时器实现逻辑更直观：

修改后的ts代码 #

import { Component, OnDestroy } from '@angular/core';

@Component({
  // 保留你原有组件的配置即可
})
export class YourComponent implements OnDestroy {
  public quantity = 0;
  // 存储定时器ID
  private saveTimer: NodeJS.Timeout | null = null;

  clickPickPlus() {
    this.quantity++;
    this.triggerDebounceSave();
  }

  clickPickMinus() {
    if (this.quantity > 0) {
      this.quantity--;
    }
    this.triggerDebounceSave();
  }

  // 防抖保存逻辑
  private triggerDebounceSave() {
    // 每次点击先清除之前的定时器，重置计时
    if (this.saveTimer) {
      clearTimeout(this.saveTimer);
    }
    // 2秒后执行保存，取最新的quantity值
    this.saveTimer = setTimeout(async () => {
      await this.save(this.quantity);
      this.saveTimer = null;
    }, 2000);
  }

  async save(quantity: number) {
    // 原有调用接口保存的代码
  }

  ngOnDestroy() {
    // 组件销毁时清除未执行的定时器
    if (this.saveTimer) {
      clearTimeout(this.saveTimer);
    }
  }
}

html代码和方式1完全一致。

两种方式的最终效果一致：2秒内多次点击加减按钮，只会在最后一次点击结束2秒后发送一次保存请求，携带的是最新的计数器值。

内容的提问来源于stack exchange，提问作者Per G