Question

如何延迟300ms并仅从mouseLeave事件流中获取最后一个事件，在RxJS中可观察到？我只想参加最新的活动，并将其延迟到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。

Answer 1

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

通过调用.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();
}

Answer 2

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

created_at

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

RxJS取消重叠事件并延迟

2 个答案: