Javascript RxJS取消重叠事件和延迟

如何延迟300ms并仅从RxJS中可观察到的

mouseLeave

事件流中获取最后一个事件？我只想把最新的事件延迟到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>
    );
  }
}

class MouseOverComponent扩展React.Component{
状态={menuIsOpen:false}
componentDidMount（）{
this.mouseLeave$=Rx.Observable.fromEvent（this.mouseDiv，“mouseLeave”）
.延迟（300）
.节流时间（300）
.subscribe（（）=>/*这里我想隐藏div*/）；
}
组件将卸载（）{
此.mouseLeave$.unsubscribe（）；
}
菜单切换=e=>{
e&e.preventDefault（）
让{menuIsOpen}=this.state
menuIsOpen=！menuIsOpen
this.setState（{menuIsOpen，forceState:true}）
}
render（）{
//const menuStateClass=…正在解析具有状态的类名
返回(
this.mouseDiv=ref}>
移动鼠标并查看控制台。。。
);
}
}

但它不起作用，之前的事件也是如此。它的隐藏和显示无法控制，而我做快速鼠标离开

我想要

mouseDiv

当鼠标离开div并等待300ms后隐藏。

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

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

fiddle:

我认为“仅获取最新事件”是指在调用

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();
}

你试过使用吗？