Question

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

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

所以基本上在发生这种情况时，我们必须向用户显示某种类型的加载器，并在提供反馈之前等待，即使他已经将项目X拖到项目Y上。

我正在使用具有以下签名的dragula库：

  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将事件限制为over和out事件，直到我获得给定可拖动项目的数据。

我的尝试：

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的新手） - 太多样板。我怎么能改善这个？

RxJS：onNext与相关事件的延迟？

0 个答案: