Angular中仅在方法调用间隔超1000ms时触发Emit事件

你可以通过RxJS的Subject结合debounceTime操作符在当前组件中实现防抖逻辑，无需修改custom-input组件本身，具体步骤如下：

1. 导入依赖
   在组件文件顶部导入所需的RxJS工具和Angular生命周期钩子：

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

2. 定义Subject和销毁信号
   在组件类中声明两个Subject，一个用于接收输入变更的值，另一个用于组件销毁时清理订阅：

   export class YourComponent implements OnInit, OnDestroy {
     @Output()
     public changed: EventEmitter<string> = new EventEmitter();
     
     private inputSubject = new Subject<string>();
     private destroy$ = new Subject<void>();
     
     // ... 其他代码
   }
   

3. 设置防抖订阅
   在ngOnInit钩子中，对inputSubject应用debounceTime(1000)，并订阅处理最终的emit逻辑：

   ngOnInit(): void {
     this.inputSubject.pipe(
       debounceTime(1000), // 间隔1000ms才触发后续逻辑
       takeUntil(this.destroy$) // 组件销毁时自动取消订阅
     ).subscribe(value => {
       // 这里执行你原来的emit逻辑
       this.changed.emit(value + ...);
     });
   }
   

4. 修改inputChanged方法
   把原来直接emit的逻辑改成向inputSubject发送值：

   public inputChanged(value: string): void {
     this.inputSubject.next(value);
   }
   

5. 清理资源
   在ngOnDestroy钩子中完成Subject的清理，避免内存泄漏：

   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
     this.inputSubject.complete();
   }
   

逻辑说明 #

每次custom-input触发altered事件调用inputChanged时，只会把值发送到inputSubject中，不会立即执行emit。RxJS的debounceTime会等待1000ms，如果期间没有新的值传入，才会把最后一次的值传递到订阅回调中，执行最终的this.changed.emit，完全符合你给出的示例流程。

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