rxjs:一道面试题
2018-01-11 本文已影响199人
lolivialucky
有页面A,当页面A处于激活状态时,每隔10秒,去调用一次API更新数据,但当离开页面A时,停止调用API,回到页面A时,重新执行以上操作。面试官当时提供了三个数据流,分别如下:
数据流a: 每隔10秒发射一个数据的数据流;
数据流b: focusin事件的数据流;
数据流c: foucusout事件的数据流
实现方法如下:
const interval$ = Observable.interval(10000);
const blur$ = Observable.fromEvent(this.testEle.nativeElement, 'focusout').mapTo(false);
const focus$ = Observable.fromEvent(this.testEle.nativeElement, 'focusin').mapTo(true);
Observable.merge(blur$, focus$)
.switchMap(val => val ? interval$ : Observable.empty())
.subscribe(() => {
this.service.getTestData()
.then((res) => {
this.test = res.json();
});
});