RxJS 取消重叠事件和延迟答案

【问题标题】：RxJS cancel overlapping events and delayRxJS 取消重叠事件和延迟
【发布时间】：2018-08-15 06:55:54
【问题描述】：

如何在 RxJS 中延迟 300 毫秒并仅从 mouseLeave 事件流 Observable 中获取最后一个事件？我只想获取最新事件并将其延迟到 300 毫秒，然后触发一个方法。

class MouseOverComponent extends React.Component {
  state = {menuIsOpen: false}

  componentDidMount() {
    this.mouseLeave$ = Rx.Observable.fromEvent(this.mouseDiv, "mouseleave")
      .delay(300)
      .throttleTime(300)
      .subscribe(() => /* here I want to hide the div */);
  }

  componentWillUnmount() {
     this.mouseLeave$.unsubscribe();
  }

  menuToggle = e => {
    e && e.preventDefault()
    let {menuIsOpen} = this.state
    menuIsOpen = !menuIsOpen
    this.setState({menuIsOpen, forceState: true})
  }

  render() {
    // const menuStateClass = ... resolving className with state
    return (
      <div ref={(ref) => this.mouseDiv = ref}>
          Move the mouse and look at the console...
      </div>
    );
  }
}

但它也无法触发以前的事件。当我快速鼠标离开时，它的隐藏和显示无法控制。

当鼠标离开 div 并等待 300 毫秒然后隐藏时，我想要 mouseDiv。

【问题讨论】：

您是否尝试过使用forkJoin？

标签： javascript reactjs rxjs

【解决方案1】：

添加 first() 和 repeat() 会将您的流从干净状态重置，它可能可以解决您的问题。

 Rx.Observable.fromEvent(block, "mouseleave")
      .delay(300)
      .throttleTime(300)
      .first()
      .repeat()
      .subscribe(console.log);

小提琴：http://jsfiddle.net/cy0nbs3x/1384/

【讨论】：

【解决方案2】：

我认为“仅获取最新事件”是指您希望在调用 this.mouseLeave$.unsubscribe(); 时从 fromEvent(this.mouseDiv, "mouseleave") 获取最后一个值。

通过调用.unsubscribe()，您可以处理在这种情况下不是您想要的链。相反，您可以使用如下所示的 takeUntil 和 takeLast(1) 运算符来完成触发 takeLast(1) 的链，该链传递它收到的最后一个值：

componentDidMount() {
  this.mouseLeave$ = Rx.Observable.fromEvent(this.mouseDiv, "mouseleave")
    .takeUntil(this.unsub$)
    .takeLast(1)
    .delay(300)
    .subscribe(() => /* here I want to hide the div */);
}

componentWillUnmount() {
   this.unsub$.next();
}

【讨论】：