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