Angular - 为事件添加去抖动答案

【问题标题】：Angular - Add debounce to an eventAngular - 为事件添加去抖动
【发布时间】：2020-07-06 12:26:46
【问题描述】：

我正在使用 mouseenter 和 mouseleave 事件来处理我的应用程序中的 sidenav 打开和关闭。我想为这些事件添加一些去抖动，因为现在如果您将这些事件快速悬停在容器上，这些事件会被调用很多次，并且我的 sidenav 会出现奇怪的行为。如何为这些事件添加去抖动？有可能吗？

【问题讨论】：

到目前为止您尝试了什么，以便我们找出问题所在
如果你使用fromEvent rxjs 方法，你可以在管道中添加debounce 来修改你的observable。

标签： angular typescript

【解决方案1】：

在你的按钮上添加一个模板引用变量：

<button #button>Click me</button>

使用 @ViewChild

在你的组件中引用它

@ViewChild('button') button: ElementRef;

使用 rxjs 中的 fromEvent 来监听 click 事件并使用 debounceTime 操作符：

ngAfterViewInit() {
    fromEvent(this.button.nativeElement, 'click').pipe(
      debounceTime(2000) // 2 seconds
    ).subscribe(() => {
      // do whatever
    });
  }

【讨论】：

【解决方案2】：

RXJS 有一个函数 FromEvent 将事件转换为流你必须创建两个流，一个在进入，另一个在离开

我认为对于 debounceTime，您也应该使用 distinctUntilChanged。否则它会发出 true true 或 false false ，但你需要 true false 或 false true 序列

 @ViewChild('sizeMenu')
  set SizeMenu(sizeMenu: ElementRef) {
    let mouseEnter$ = fromEvent(sizeMenu.nativeElement, 'mouseenter').pipe(
     mapTo(true));

     let mouseLeave$ = fromEvent(sizeMenu.nativeElement, 'mouseleave').pipe(
     mapTo(false));


     this.mouseEvents$ = mouseLeave$.pipe(merge(mouseEnter$), debounceTime(this.DebounceTime), distinctUntilChanged());
  };

这是 stackblitz 上的 example

【讨论】：