Javascript RxJS:onNext的延迟与相关事件?

Javascript RxJS:onNext的延迟与相关事件?,javascript,rxjs,Javascript,Rxjs,场景:用户可以在网页上拖动一个项目,然后拖放到其他项目上。当用户将项目拖到另一个对象上时,会向用户显示实时反馈,告知如果用户将项目X拖到项目Y上会发生什么情况 当用户开始拖动时,必须从当前项目的后端提取数据,这可能需要1-2秒 因此,基本上,当这种情况发生时,我们必须向用户显示某种加载程序,并在给出反馈之前等待,即使他可能已经将项目X拖到了项目Y上 我正在使用dragula library,它有以下签名: dragula(dragulaConfig) .on('drag', functi

场景:用户可以在网页上拖动一个项目,然后拖放到其他项目上。当用户将项目拖到另一个对象上时,会向用户显示实时反馈,告知如果用户将项目X拖到项目Y上会发生什么情况

当用户开始拖动时,必须从当前项目的后端提取数据,这可能需要1-2秒

因此,基本上,当这种情况发生时,我们必须向用户显示某种加载程序,并在给出反馈之前等待,即使他可能已经将项目X拖到了项目Y上

我正在使用dragula library,它有以下签名:

  dragula(dragulaConfig)
  .on('drag', function(el, source ) { /* do on drag */ })
  .on('cancel', function(el, container, source ) { /* do on cancel */ })
  .on('drop', function(el, target, source ) { /* do on drop */ })
  .on('over', function(el, container, source ) { /* do on over */ })
  .on('out', function(el, container, source ) { /* do on out */ });
所以基本上它不关心我是否有数据,它只是触发事件。 我的想法是使用Rx将事件限制为
超过
超出
事件,直到我拥有给定可拖动项的数据

我的尝试是:

var instance =  dragula(dragulaConfig);
var pauser = new Rx.Subject();
var rxo = Rx.Observable;

var transform = function(el, target, source) {
  return {
    el: el,
    target: target,
    source: source
  };
};

var pause = function() {
  pauser.onNext(false);
};

//subscribe to drag event, and release pause once we have the data./
rxo
.fromEvent(instance, 'drag', transform)
.subscribe(function(event) {
  thisReturnsAPromise(event).then(function() {
    pauser.onNext(true);
  });
});

// subscribe to 'over' event that will not be fired until we have our item data
rxo
.fromEvent(instance, 'over', transform)
.pausable(pauser)
.subscribe(function() { /* show feedback to the user */});

// subscribe to 'out' event that will not be fired until we have our item data
rxo
.fromEvent(instance, 'out', transform)
.pausable(pauser)
.subscribe(function() { /* remove feedback to the user */});

// subscribe to 'cancel' event - this will put pause to over/out events
var cancel = rxo
.fromEvent(instance, 'cancel', transform);
cancel.subscribe(pause);
cancel.subscribe(function() { /* show feedback to the user if he cancels */});

// subscribe to 'drop' event - this will put pause to over/out events
var drop = rxo
.fromEvent(instance, 'drop', transform);
drop.subscribe(pause);
drop.subscribe(function() { /* add dropped item */});
这是可行的,但感觉不对(我是RxJS的新手)——太多的样板。 我该如何改进这一点