javascript - RxJS 取消重叠事件和延迟

Question

如何延迟 300 毫秒并仅从mouseLeaveRxJS 中的事件流 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>
    );
  }
}

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

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

标签： javascriptreactjsrxjs

Answer 1

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

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

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