const observable = new rxjs.BehaviorSubject(0);
observable.subscribe(v => console.log(v));
rxjs
.of(1)
.pipe(rxjs.operators.delay(500))
.subscribe(v => observable.next(v));
observable.next(2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.1/rxjs.umd.js"></script>
如您所见,上面的 observable 按顺序发出 3 个值:0、2、1。
当发出值“2”时是否可以取消(或忽略)值“1”? (无需关闭订阅)
最佳答案
似乎您需要从源中switchMap
并在其中应用延迟
。
switchMap(value =>
of(value).pipe(delay(50))
)
插图和 playground for switchMap with a delay :
这是一个片段:
const {Subject, of} = rxjs;
const {switchMap, delay} = rxjs.operators;
const subject = new Subject(0);
subject
.pipe(
switchMap(value =>
// switchMap to a delayed value
of(value).pipe(delay(500))
)
)
.subscribe(v => console.log(v));
// immediately emit 0
subject.next(0);
// emit 1 in 1 sec
setTimeout(()=>{
subject.next(1);
}, 1000)
// emit 2 in 1.2 sec
setTimeout(()=>{
subject.next(2);
}, 1200)
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.1/rxjs.umd.js"></script>
这是一个鼠标悬停的示例
const {fromEvent, merge, of, EMPTY} = rxjs;
const {switchMap, delay, mapTo} = rxjs.operators;
const button = document.getElementById('pane');
const mouseOver$ = fromEvent(button, 'mouseover').pipe(
mapTo(true)
);
const mouseOut$ = fromEvent(button, 'mouseout').pipe(
mapTo(false)
);
merge(mouseOver$, mouseOut$)
.pipe(
switchMap(value => {
if (!value) { return EMPTY; }
return of('mouse is over').pipe(delay(500))
})
)
.subscribe(v => console.log(v));
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.1/rxjs.umd.js"></script>
<style>
#pane{
margin: 1rem;
display: inline-block;
width: 5rem;
height: 5rem;
background: rebeccapurple;
}</style>
<div id="pane"><div>
希望这有帮助
关于javascript - 如果发出相同的可观察值,则取消延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55851474/