RxJS -管理即将到期的可观察对象数组
RxJS -管理即将到期的可观察对象数组
提问于 2018-01-04 00:26:51
我正在尝试实现一个通知小部件。每隔一段时间，浏览器窗口的一角就会显示一条消息( "toast")。我希望消息在30秒后自动隐藏。我还想要的是，如果同时有更多的消息到达，小部件将在堆栈中彼此重叠显示，逐渐隐藏即将到期的消息。
我可以只用setTimeout实现所有的功能，但我确信RxJS可以使用更好的方法，而且我发现文档很难导航。(我正在努力处理http://reactivex.io/documentation/operators.html、http://rxmarbles.com/、博客帖子等)
有没有人知道一个或多个运营商可以帮助满足要求？
谢谢!
编辑:示例时间线
0 - empty window
1 - show "A"
5 - show "B" (A and B are both shown)
29 - show "C" (A, B and C are stacked)
31 - A disappears (only B and C remain)
35 - B disappears (C shown)
59 - C disappears回答 2
Stack Overflow用户
发布于 2018-01-04 17:57:46
您可以使用subject作为队列来将烤面包机推送到它。delay()允许您调整烤面包机停留在屏幕上的持续时间
let a=Rx.Observable.of('a')
let b=Rx.Observable.of('b')
let c=Rx.Observable.of('c')
let queue=new Rx.Subject()
queue.mergeMap(res=>res)
.do(res=>{
// you can make toast appear now
console.log(res,':appearing')
})
.delay(2000)
.do(res=>{
// you can make toast disappear now
console.log(res,':disappearing')
}).subscribe()
setTimeout(()=>queue.next(a))
setTimeout(()=>queue.next(b),2000)
setTimeout(()=>queue.next(c),4000)Stack Overflow用户
发布于 2018-02-16 01:31:00
最后，我找到了我正在寻找的那种操作符：scan操作符(文档、here和here)。
我的实现基于发出“隐藏”和“显示”事件的Subject，以及将事件累积到数组中的BehaviourSubject。
与RxJS相关的元素如下：
export class Message {
id: string;
text: string;
type: MessageType;
}
export class MessageAction {
action: 'show' | 'hide';
msg: Message;
}
...
export class NotificationComponent {
...
messages = new BehaviorSubject<Message[]>([]);
msgsSource = new Subject<MessageAction>();
constructor() {
this.msgsSource.scan((arr: Message[], msgAction: MessageAction) => {
return (msgAction.action === 'show') ?
arr.concat(msgAction.msg) :
arr.filter(msg => msg.id !== msgAction.msg.id);
}, []).subscribe(this.messages);
}
show(text: string, type: MessageType, autoHideAfter: number = DEFAULT_MESSAGE_TIMEOUT) {
const msg: Message = {
id: '' + (this.msgIdx++),
text: text,
type: type
};
this.msgsSource.next({ action: 'show', msg: msg });
setTimeout(() => {
this.msgsSource.next({ action: 'hide', msg: msg });
}, autoHideAfter);
}
hide(id: string) {
this.msgsSource.next({ action: 'hide', msg: { id: id } as Message });
}
...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48081314
复制相关文章
相似问题
腾讯云开发者
