[RxJS] Transformation operator: bufferToggle, bufferWhen

bufferToggle(open: Observable, () => close: Observalbe : Observalbe<T[]>)

bufferToggle take two args, first is opening observable, seconde is a function which return an observable for closing.

The closeing observalbe only execute after opening emit value.

const source$ = Rx.Observable.interval(500);
const open$ = Rx.Observable.interval(1500);
const close$ = Rx.Observable.interval(1000);

/**

---0---1---2---3---4---5---6---7---8---9----....    (source)

-----------1-----------2-----------3--------...      (open)

           --- ---x    --- ---x    --- ---x...      (close)
        bufferToggle(open$, () => close$)

------------------([2,3])-----([5.6])-----([8,9])--...
*/

const foo$ = source$.bufferToggle(open$, () => {
  return close$;
});

foo$.subscribe(
  (x) => console.debug("Next: " + x),
  (err) => console.error(err),
  () => console.info("DONE")
)

/*

"Next: 2,3"
"Next: 5,6"
"Next: 8,9"
"Next: 11,12"
...
*/

bufferWhen( () => Observable):

bufferWhen takes a function which return observable.

const source$ = Rx.Observable.interval(500);
const close$ = Rx.Observable.interval(1000);

/**

---0---1---2---3---4---5---6---7---8---9----....    (source)

-------0-------1-------2-------3-------4---....     (close)

        bufferWhen(()=>close$)

-------(0)-----([1,2])-([3,4])-([5,6])--......
*/

const foo$ = source$.bufferWhen(() => close$);

foo$.subscribe(
  (x) => console.debug("Next: " + x),
  (err) => console.error(err),
  () => console.info("DONE")
)

/*

"Next: 0"
"Next: 1,2"
"Next: 3,4"
"Next: 5,6"
"Next: 7,8"
...
*/

时间： 2024-10-12 14:38:08

[RxJS] Transformation operator: bufferToggle, bufferWhen的相关文章

[RxJS] Transformation operator: map and mapTo

We made our first operator called multiplyBy, which looks a bit useful, but in practice we don't need it because it's too specific: it only does simple multiplication on numbers. In this lesson we will see how the map() operator is useful for any cal

[RxJS] Transformation operator: scan

All of the combination operators take two or more observables as input. These operators may also be alternatively called "vertical combination operators", because of how they work in a marble diagram. Next, we will learn about scan(), which is a

[RxJS] Transformation operator: repeat

Operator repeat() is somewhat similar to retry(), but is not for handling operators. In this lesson we learn how repeat works. var foo = Rx.Observable.interval(500) .zip(Rx.Observable.of('a','b','c','d'), (x,y)=>y); var bar = foo.map(x => x.toUpperC

[RxJS] Transformation operator: buffer, bufferCount, bufferTime

This lesson will teach you about another horizontal combination operator: buffer and its variants. Buffer groups consecutive values together, emitting the output as an array. The buffer variants and their arguments allow to specify when to close the

[RxJS] Utility operator: do

We just saw map which is a transformation operator. There are a couple of categories of operators, such as filtering, combination, flattening, etc. One of these categories is the utility operators. The most important utility operator is do, useful fo

[RxJS] Connection operator: multicast and connect

We have seen how Subjects are useful for sharing an execution of an RxJS observable to multiple observers. However, this technique requires some laborious setting up. In this lesson we will learn about the multicast() operator which helps solve the s

[RxJS] Creation operator: of()

RxJS is a lot about the so-called "operators". We will learn most of the important operators, one by one. In this lesson, we will see our first creation operator: of(). var foo = Rx.Observable.of(42, 100, 200); // var bar = Rx.Observable.create(

[RxJS] Combination operator: withLatestFrom

Operator combineLatest is not the only AND-style combinator. In this lesson we will explore withLatestFrom, another AND-style combination operator, and how it works essentially as map() operator, with some combination properties. var foo = Rx.Observa

[RxJS] Creation operator: create()

We have been using Observable.create() a lot in previous lessons, so let's take a closer look how does it work. The create function: var foo = Rx.Observable.create( function(observer){ observer.next(42); observer.next(100); observer.next(200); observ