javascript - 在没有 combineLatest 的情况下从另一个可观察对象获取值(value)的最佳方法

Question

我有 2 个可观察对象，其中基本上是 2 个 dom 事件。一个是“dragstart”事件，另一个是“drop”事件。显然 dragStart 将首先启动，并保持变量直到 dropEvent Observable 触发。

这里有一个简单的例子，有助于说明:

this.containerEl = document.querySelector...

var dragStart$ = Observable.fromEvent(this.containerEl, 'dragstart')
        .map((e) => e.target)

var dropEvent$ = Observable.fromEvent(this.containerEl, 'drop')
        .map((e) => e.target)

var subscription = dropEvent$.subscribe( (el) =>{
  el.appendChild( **NEED DRAGSTART EL HERE** )
})

我尝试在订阅上使用 combineLatest(dragStart$,dropEvent$) 但这显然行不通，因为 dragStart$ 会在 dropEvent$ 之前触发。

注意

我的目标是不对此使用外部状态。 IE:在 dragStart$ 上设置一个全局变量，然后在 dropEvent$ 上访问。

对此有什么好的解决方案？我现在正在学习 rxJS，所以任何专家意见都将不胜感激!

Answer 1

因为您知道拖放事件必须跟在 dragStart 事件之后，所以最好的方法是将拖放序列建模为单个可观察对象。只有在收到开始事件后才开始观察放置事件:

// observes start events
const start$ = Observable.fromEvent(this.containerEl, 'dragstart');
// will observe the *next* drop event
const nextDrop$ = Observable.fromEvent(this.containerEl, 'drop').take(1);

const dragDrop$ = start$
    // for each start event, listen for next drop event
    .flatMap({target: startEl} => nextDrop$
        // for drop event, return the start and end elements
        .map({target: endEl} => ({startEl, endEl})));

const subscription = dragDrop$.subscribe(({startEl, endEl}) => {
    endEl.appendChild(startEl);
});