javascript - rxjs 中棘手的 Steam 可观察合并

Question

我需要一些帮助。我正在尝试一个实验，我在我的按钮的 mouseenters 上启动我的 ajax 请求，但只有在用户单击时才消耗该请求的结果(或者如果用户单击时请求尚未完成，则将结果消耗为尽快)。如果用户没有点击就离开了按钮，请求应该被取消。

我遇到的问题是如何将点击流与请求流合并。我不能使用 withLatestFrom，因为如果请求在单击后完成，它就不会被消耗。我也不能使用 combineLatest，因为如果过去发生了任何点击，请求将被消耗，即使我目前只是将鼠标悬停在上面。会喜欢一些指导。这是一个值得思考的有趣问题，但我被困住了

const fetchContent = (url) => {
  const timeDelay$ = Rx.Observable.timer(1000); // simulating a slow request
  const request$ =  Rx.Observable.create(observer =>
    fetch(url, { mode: 'no-cors' })
      .then(json => {
         observer.onNext('res')
         observer.onCompleted()
      })
      .catch(e => observer.onError())
  )
  return timeDelay$.concat(request$)
}
const hover$ = Rx.Observable.fromEvent(myButton, 'mouseenter')
const leave$ = Rx.Observable.fromEvent(myButton, 'mouseleave')
const click$ = Rx.Observable.fromEvent(myButton, 'click')

const hoverRequest$ = hover$
  .flatMap(e =>
    fetchContent(e.target.getAttribute('href'))
      .takeUntil(leave$.takeUntil(click$))
  )

const displayData$ = click$
  .combineLatest(hoverRequest$)

displayData$.subscribe(x => console.log(x))

Answer 1

其实你离得并不远。您只是真的错过了 zip 的包含。因为您真正需要传播的是两者鼠标单击和完成请求。通过压缩请求和鼠标单击事件，您可以确保两者都不会单独发出。

const hover$ = Rx.Observable.fromEvent(myButton, 'mouseenter');
const leave$ = Rx.Observable.fromEvent(myButton, 'mouseleave');
const click$ = Rx.Observable.fromEvent(myButton, 'click');


//Make sure only the latest hover is emitting requests
hover$.flatMapLatest(() => {

  //The content request
  const pending$ = fetchContent();

  //Only cancel on leave if no click has been made
  const canceler$ = leave$.takeUntil(click$);

  //Combine the request result and click event so they wait for each other
  return Rx.Observable.zip(pending$, click$, (res, _) => res)

               //Only need the first emission
               .take(1)

               //Cancel early if the user leaves the button
               .takeUntil(canceler$);

});