Angular - 如何在 mouseLeave 事件上添加 debounceTime？

Question

目的是当鼠标离开 div 时，触发 'mouseleave' 并使用 EventEmitter 发出一个值。

但我真正无法工作的部分是，当“mouseleave”事件在触发后不到 2000 毫秒内再次触发时，它不应该执行任何操作。

只是想避免当用户用鼠标大量移动时，它会多次发出值。

我现在得到了这个代码，但没有按预期工作。

  @Output() public mouseLeave: EventEmitter<void> = new EventEmitter<void>();

  public event$: Subject<any> = new Subject<any>();

  @HostListener('mouseleave') public onMouseLeave(event: MouseEvent): void {
    this.event$.next(event);
    this.event$
      .pipe(debounceTime(2000), takeUntil(this.mouseLeave))
      .subscribe(() => {
        console.log('Mouse left');
        this.mouseLeave.emit();
      });
  }

Answer 1

由于

onMouseLeave

被多次调用，因此您每次都是新订阅

this.event$

。因此，mouseLeave 事件被频繁且快速地触发。

正如Andrei在评论中所说，你应该移动这部分

      .pipe(debounceTime(2000), takeUntil(this.mouseLeave))
      .subscribe(() => {
        console.log('Mouse left');
        this.mouseLeave.emit();
      }); 

进入ngOnInit方法，只订阅一次。

此外，不要忘记正确取消订阅，以避免内存泄漏。