RxJS会随着时间的推移发出数组项吗？

Question

我试图一个接一个地发出简单的数组值，中间有500毫秒：

var a = Rx.Observable.from([1,2,3]);
a.interval(500).subscribe(function(b) { console.log(b); });

然而，这引发了一个例外：

Uncaught TypeError: a.interval is not a function.

Answer 1

我就是这样做的：

＆＃13;

＆＃13;

var collection = [{
  first: "Romeo",
  last: "Montague"
}, {
  first: "Mercutio",
  last: null
}, {
  first: "Tybalt",
  last: "Capulet"
}];
var source = {
  last: "Capulet"
};

var collectionKeys = [];
for (var i = 0; i < collection.length; i++) {
  collectionKeys.push(Object.keys(collection[i]));
}
var sourceKeys = Object.keys(source);

//for every key pair
for (var t = 0; t < collectionKeys.length; t++) {
  //for every key in key pair
  for (var x = 0; x < collectionKeys[t].length; x++) {
    //for every key in search
    for (var y = 0; y < sourceKeys.length; y++) {
      //see if a key matches
      if (sourceKeys[y] == collectionKeys[t][x]) {
        //see if the value matches
        if (collection[collectionKeys[t][x]] == source[sourceKeys[y]]) {
          console.log(collection[t]);
        } else {
          console.log("value not found");
        }
      } else {
        console.log("key not found");
      }
    }
  }
}

＆＃13;

var fruits = ['apple', 'orange', 'banana', 'apple'];
var observable = Rx.Observable.interval(1000).take(fruits.length).map(t => fruits[t]);
observable.subscribe(t => {
  console.log(t);
  document.body.appendChild(document.createTextNode(t + ', '));
});

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用RxJS版本6的三种方法：

1。使用concatMap

import { from, of, pipe } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';

const array = [1, 2, 3, 4, 5];

from(array)
 .pipe(
   concatMap(val => of(val).pipe(delay(1000))),
 )
 .subscribe(console.log);

2。使用zip和interval

import { from, pipe, interval } from 'rxjs';
import { delay, zip} from 'rxjs/operators';

const array = [1, 2, 3, 4, 5];

from(array)
 .pipe(
   zip(interval(1000), (a, b) => a),
 )
 .subscribe(console.log);

3。使用interval作为来源

import { interval, pipe } from 'rxjs';
import { map, take } from 'rxjs/operators';

const array = [1, 2, 3, 4, 5];

interval(1000)
.pipe(
  take(array.length),
  map(i => array[i])
)
.subscribe(console.log);

Answer 3

var arrayList = [1,2,3,4,5];

var source = Rx.Observable
      .interval(500/* ms */)
      .timeInterval()
      .take(arrayList.length);

source.subscribe(function(idx){
    console.log(arrayList[idx]);
   //or document.write or whatever needed
});

Answer 4

相当晚，但更简单的解决方案是：

const arr = ["Hi,", "how", "may", "I", "help", "you?"];

Rx.Observable.interval(500)
             .takeWhile(_ => _ < arr.length)
             .map(_ => arr[_])
             .subscribe(_ => console.log(_))    

Answer 5

我发现Weichhold技术是最好的，但通过提取zip之外的压缩值可以获得明确的意图：

// Set the rounded edge for the outer bar
self.layer.cornerRadius = 12
self.clipsToBounds = true

// Set the rounded edge for the inner bar        
self.layer.sublayers![1].cornerRadius = 12
self.subviews[1].clipsToBounds = true

Answer 6

我有一些不同的要求，我的阵列也随着时间不断更新。因此，基本上我必须实现一个可以按固定间隔出队的队列，但是我不想使用Interval。

如果有人需要这样的东西，那么这种解决方案可能会有所帮助：

我有一个函数createQueue()，该函数将数组作为输入并返回一个Observable，我们订阅该Observable以固定的时间间隔监听数组中的事件。 该函数还修改了passs数组的'push（）'方法，以便每当将任何项目推入数组时，Observable都会发出。

createQueue(queue: string[]) {
  return Observable.create((obs: Observer<void>) => {
    const arrayPush = queue.push;
    queue.push = (data: string) => {
      const returnVal = arrayPush.call(queue, data);
      obs.next();
      return returnVal;
    }
  }).pipe(switchMap(() => {
    return from([...queue])
      .pipe(
        concatMap(val => of(val)
        .pipe(delay(1000), tap(_ => queue.shift())))
      );
  }))
}

让我们说这个数组是：taskQueue = [];

因此，我们需要将其传递给上述函数并进行订阅。

  createQueue(taskQueue).subscribe((data) => {
    console.log('Data from queue => ', data);
  });

现在，每次我们执行taskQueue.push('<something here>')时，都会在“ 1000ms”延迟后触发订阅。

请注意：调用taskQueue之后，我们不应为createQueue()分配新的数组，否则我们将丢失修改后的push()。

以下是上述实现的虚拟示例：Test Example

Answer 7

Rx.Observable实例没有interval方法http://xgrommx.github.io/rx-book/content/core_objects/observable/observable_instance_methods/index.html。你可以这样使用。

Rx.Observable.interval(500) .map(function(v) { return [1,2,3];}) .subscribe(console.log.bind(console));