Question

在使用observables的Angular4 / Ionic3环境中。滑块与页面上的幻灯片。当一个人滑动移动到下一张幻灯片时，会触发一个多步骤，长时间运行的observable。目前，当一个人再次滑动时，第二个可观察实例运行（在第一个实例完成之前）。

如何使第二个observable等待第一个observable完成？我不想阻止这个人滑动。滑动事件应该只是排队下一个observable。

当前时间表

Swipe1
Observable Instance1 = start
Swipe2
Observable Instance2 = start
Observable Instance1 = end
Observable Instance2 = end

所需时间表

Swipe1
Observable Instance1 = start
Observable Instance1 = end
Swipe2
Observable Instance2 = start
Observable Instance2 = end

当前可观察的伪代码

private slideNextStart(event) {

    // Don't let this Observable be called again until it finishes.
    Observable.of(null)
    .flatMap(() => {
        console.log('start');
        // Do something.
    })
    .flatMap(() => {
        // Do something else.
    })
    .flatMap(() => {
        // Do another something else.
    })
    .subscribe(() => { console.log('end'); });

来自朱莉娅答案的Angular2翻译代码

import { Observable } from 'rxjs/Rx';
import { Subject } from 'rxjs/Subject';

let subject = new Subject();
subject.asObservable()
    .concatMap((x: Observable<any>) => { return x })
    .subscribe(x => console.log(x));

// request 1
subject.next(Observable
    .timer(4000)
    .map(() => { console.log('req1') })
    .mapTo('req1'));

// request 2
subject.next(Observable.of('req2'));

Answer 1

Observable.concatMap就是为此而设计的。 ＆＃34;将每个源值投影到一个Observable，它在输出Observable中合并，以序列化的方式等待每一个在合并下一个之前完成。＆＃34; concatMap

// subject to emit observables
let subject = new Rx.Subject();

// do concatMap to sequence the requests
subject.asObservable()
 .concatMap(x=>x)
 .subscribe(x=>console.log(x))

// request 1
subject.next(Rx.Observable
    .timer(4000)
    .mapTo('req1'));

// request 2
subject.next(Rx.Observable.of('req2'));

防止Observable再次运行直到完成

1 个答案: