使用RXJS延迟每个元素

时间:2018-06-16 10:12:37

标签: rxjs

我使用RxViz来模拟每1秒产生的不同动作。当我尝试

Rx.Observable.create(obs => {
  obs.next([1, 2, 3]); // or could be ['aaa', 'bbbb', 'ccc']
  obs.complete();
}).delay(1000);

on https://rxviz.com

或我自己使用console.log

它会同时显示三个数字1,2,3

有关于同样问题的帖子,但没有一个答案对我有用。我使用的是Rx最新版本6

How can I create an observable with a delay

[编辑]数组可以包含数字,字符串或任何对象

之类的内容

5 个答案:

答案 0 :(得分:2)

如果您想延迟每个值(例如1秒),您可以执行以下操作:

 Rx.Observable.create(obs => {
      obs.next([1, 2, 3]);
      obs.complete();
    })
      .pipe(
        // make observable to emit each element of the array (not the whole array)
        mergeMap((x: [any]) => from(x)),
        // delay each element by 1 sec
        concatMap(x => of(x).pipe(delay(1000)))
      )
      .subscribe(x => console.log(x));
  }

这里我没有修改你创建的observable的内部。相反,我只是采取你的观察并应用适当的操作来实现你似乎期待的东西。

答案 1 :(得分:1)

这个通过修改@ siva636的答案来起作用

Rx.Observable.create(obs => { 
  obs.next(1); 
  obs.next(2); 
  obs.next(3); 
  obs.complete(); 
}.concatMap(x=>Rx.Observable.of(x) .delay(1000) )

答案 2 :(得分:0)

在这里,您可以在一个可观察的发射中发射所有数组。 [1,2,3]。 您只将该发射延迟1000毫秒。但排放仍然是一个。

即使我们自己发出每个值,延迟功能也只适用于第一次发射。其他人将在紧随其后:

Rx.Observable.create(obs => {
  var arr = [1, 2, 3];
  arr.forEach(item => obs.next(item));
  obs.complete();
}).delay(1000);

create构造函数中没有魔法。如果我们希望每x次发射一次:

我们可以创建一个发出这些值的间隔(取自learnrxjs

import { Observable } from 'rxjs/Observable';

/*
  Increment value every 1s, emit even numbers.
*/
const evenNumbers = Observable.create(function(observer) {
  let value = 0;
  const interval = setInterval(() => {
    observer.next(value);
    value++;
  }, 1000);

  return () => clearInterval(interval);
});

答案 3 :(得分:0)

这是我的解决方法(非常干净)

const fakeData = [1,2,3]

loadData$() {
    return from(fakeData).pipe(
      concatMap(item => of(item).pipe(
        delay(1000)
      )),
    );
  }

答案 4 :(得分:0)

这是一种建立在其他响应基础上的简洁方法。

from([...Array(10).keys()]).pipe(
    concatMap(x => of(x).pipe(delay(1000)))
).subscribe(y => console.log(y))