-
Notifications
You must be signed in to change notification settings - Fork 1
/
rxjs.txt
493 lines (400 loc) · 20.1 KB
/
rxjs.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
1) Promises:-
function checkValue(a, b){
return new Promise((rs, rj) => {
if(a-b>0) {
rs('success' + (a-b));
} else {
rj('fail' + (a-b));
}
})
}
checkValue(10, 20).then( x=> console.log(x)).catch( y => console.log(y)): (O/P) -> fail-10
checkValue(30, 20).then( x=> console.log(x)).catch( y => console.log(y)): (O/P) -> success10
2) async/await:-
async function pop(a,b) {
try {
var t = await checkValue(a, b);
console.log(t);
} catch(ex) {
console.log(ex);
}
}
pop(10,20): (O/P) -> fail-10
pop(30,20): (O/P) -> success10
----------------------------------------------------------------------------------------------------------------------------------------------------------
3) Rxjs:- Main concepts
Observable:- Contain stream of data
Observer:- is a consumer of values delivered by an Observable and set of callback functions (next: x=> console.log(x), error: e=>console.log(e), complete: ()=>console.log('completed'))
subscriber:- get the data from observable.
const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
subscriber.complete();
}, 1000);
});
const observer = {
next: x => console.log('Observer got a next value: ' + x),
error: err => console.error('Observer got an error: ' + err),
complete: () => console.log('Observer got a complete notification')
};
observable.subscribe(observer);
4) interval(1000) : emmits after every 1 sec (o/p:- 1,2,3,......)
5) timer(5000, 1000): similar to interval only start will happens after every 5sec which is first argument.
e.g
rxjs.timer(2000).subscribe(x => console.log(x)) (o/p): 2 //after 2 seconds
6) of('a', 'b', 'c'): emmits 3 values one by one after subscription
7) from(['a','b', 'c']): similar to 'of' but emmites each value in array as a indivisual stream and also can convert Promise to observable
const p = new Promise((res, rej)=> (res('helo'))); var v = rxjs.from(p)
8) toArray(): collect all observable data and then convert it into array
e.g: rxjs.interval(1000).pipe(rxjs.operators.take(4), rxjs.operators.toArray()).subscribe(x => console.log(x)):- (o/p) [0, 1, 2, 3]
9) take(4): takes first 4 emitted values
e.g: rxjs.interval(1000).pipe(rxjs.operators.take(5), rxjs.operators.toArray()).subscribe(x => console.log(x)):- (o/p) [0, 1, 2, 3, 4]
10) Create Custome observable: Observable.create(observer => {})
e.g
rxjs.Observable.create(observer => {
setTimeout(() => {
observer.complete(000);
}, 1000);
observer.next(200);
observer.error(404);
}).subscribe(x => console.log(x))
11) map :- change the stream data
e.g
rxjs.interval(100).pipe(rxjs.operators.map(x=>x*2), rxjs.operators.take(10), rxjs.operators.toArray()).subscribe(x=>console.log(x))
(o/p): [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]
12) Pluck: getting only particular data
e.g:
var t = [{a: 'a1', b: 'b1'},{a: 'a2', b: 'b2'},{a: 'a3', b: 'b3'},{a: 'a4', b: 'b4'} ]
rxjs.from(t).pipe(rxjs.operators.pluck('a'),rxjs.operators.toArray()).subscribe(x=>console.log(x))
(o/p): ["a1", "a2", "a3", "a4"]
For nested : {address: {city: 'mayami', pincode: 1455000}} use:-> pluck('address', 'pincode')
13) Filter: Getting filter data accroding to condition:
e.g:
var t = [{a: 'a1', b: 'b1'},{a: 'a2', b: 'b2'},{a: 'a3', b: 'b3'},{a: 'a4', b: 'b4'} ]
rxjs.from(t).pipe(rxjs.operators.filter(x=> x.a === 'a1'),rxjs.operators.toArray()).subscribe(x=>console.log(x))
(o/p): [{a: 'a1', b: 'b1'}]
14) Tap / (do): is just used to make sideeffect that doesnt effect the actual data; any action such as console.log or do any operation that is
required but not to effect our data.
e.g:
var t = [1,2,3,4,5]
rxjs.from(t).pipe(rxjs.operators.tap(),rxjs.operators.toArray()).subscribe(x=>console.log(x));
(o/p): [1,2,3.4,5]
15) takeLast(2): take last 2 data
e.g
var t = [{a: 'a1', b: 'b1'},{a: 'a2', b: 'b2'},{a: 'a3', b: 'b3'},{a: 'a4', b: 'b4'} ]
rxjs.from(t).pipe(rxjs.operators.takeLast(2), rxjs.operators.toArray()).subscribe(x=>console.log(x))
(o/p): [{a: 'a3', b: 'b3'},{a: 'a4', b: 'b4'} ]
16) takeUntil(<observable>): stream would get cancled after sent <observable> is called
e.g
var y = new rxjs.Subject();
rxjs.interval(1000).pipe(rxjs.operators.takeUntil(y)).subscribe(x=>console.log(x))
(o/p): 1...2...3....4 will be getting called until y.next() is called //.... represents value at new line
var y = rxjs.operators.timer(50000)
rxjs.interval(1000).pipe(rxjs.operators.takeUntil(y)).subscribe(x=>console.log(x))
(o/p): 1...2...3....4....5 //.... represents value at new line
17) retry(3): retries the observable data till success will came in 3 chances else will throw error
e.g
http.get('www.google.com').pipe(retry(3)).subscribe(x=>console.log(x))
18) retryWhen(): takes error observable as a input and apply condition when to retry
retryWhen(receives: (errors: Observable) => Observable, the: scheduler): Observable
e.g
http.get('www.google.com').pipe(retryWhen( err=> err.pipe(delay(3000)))).subscribe(x=>console.log(x))
(o/p): here retry happens after every 3 seconds
19) scan((x,y)=>{}, 0): it is similar to reduce in Javascript Array object
first argument is acumilater and second argument is seed from where it should start
e.g
1) http.get('www.google.com').pipe(retryWhen(err=> err.pipe(delay(3000), scan((x,y)=>{(x>5? throw err: x++), x},0)))).subscribe(x=>console.log(x))
(o/p): will retry 5 times every time delay of 3 seconds
2) rxjs.interval(100).pipe(rxjs.operators.take(5), rxjs.operators.scan((x,y) => x+y,0), rxjs.operators.toArray()).subscribe(x => console.log(x))
(o/p): [0, 1, 3, 6, 10]
20) delay(5000): delays response from observable with 5 seconds delay e.g: please refer oabove one in scan or retryWhen
21) debonceTime(5000): after 1 request doesnt take any request till 5 seconds
e.g
var src = document.querySelector('.mat-drawer-inner-container'); //this is a div which is having scroll bar
rxjs.fromEvent(src, 'scroll').pipe(rxjs.operators.debounceTime(1000)).subscribe(x=>console.log(x))
(o/p): gets event value after 1 second
22) distinctUntilChanged: till the data gets changed it subscription doesnt call
e.g
var src = document.querySelector('#txt');
rxjs.fromEvent(src, 'keyup').pipe(rxjs.operators.map(x=>x.target.value), rxjs.operators.debounceTime(1000), rxjs.operators.distinctUntilChanged()).subscribe(x=>console.log(x))
(o/p): gets after initial value is changed is distinct between 1 second
23) Conditional oprts:
1) defaultIfEmpty: addes deafult value if getting any empty value
e.g
rxjs.empty().pipe(rxjs.operators.defaultIfEmpty('Hello')).subscribe(x=>console.log(x))
(o/p): "Hello"
2) every: check all values are valid according to condition
e.g
rxjs.from([2,4,6,8]).pipe(rxjs.operators.every(x=>x%2===0)).subscribe(y=> console.log(y))
(o/p): true
3) iif: check condtion and then executes first observable if condition is true or else second observable
e.g
rxjs.from([2,4,6,8,9]).pipe(rxjs.operators.mergeMap(x=> rxjs.iif((z) => x%2===0, rxjs.of('x'), rxjs.of('y'))), rxjs.operators.toArray()).subscribe(y=> console.log(y))
(o/p): ["x", "x", "x", "x", "y"]
4) sequenceEqual: compaire sequence
e.g
rxjs.from([1,2]).pipe(rxjs.operators.sequenceEqual(rxjs.from([1,2]))).subscribe(x=>console.log(x))
(o/p) true
24) Switch:
1) switchMap() => get the value of observable and send to another observable, such that this can be used when one observable value
dependes on another observable
e.g
rxjs.from([2,4,6,8,9]).pipe(rxjs.operators.switchMap(x=>(rxjs.of(x)))).subscribe(x=>{console.log(x)})
(o/p): 2....4....6....8....9 //.... represents value at new line
2) switchMapTo() => change value of observable value
e.g
rxjs.from([2,4,6,8,9]).pipe(rxjs.operators.switchMapTo(rxjs.of('hello'))).subscribe(x=>{console.log(x)}
(o/p) hello....hello....hello....hello....hello //.... represents value at new line
3) switchAll() => gets list of observable and outputs each observable value
e.g
rxjs.from([rxjs.of(1),rxjs.of(2)]).pipe(rxjs.operators.switchAll(x=>(x))).subscribe(x=>{console.log(x)})
(o/p) 1....2 //.... represents value at new line
25) Merg:
1) merge: executes as per observable execution time that first executes
e.g
var t = rxjs.of(1).pipe(rxjs.operators.delay(1000));
var v = rxjs.of(2).pipe(rxjs.operators.delay(500));
rxjs.of(3).pipe(rxjs.operators.delay(1100), rxjs.operators.merge(t,v)).subscribe(x=>console.log(x));
(o/p): 2....1....3
2) mergeAll: converts all returned observabe according to time that first executs
e.g
rxjs.of(4,2).pipe(rxjs.operators.map(x => rxjs.of(x).pipe(rxjs.operators.delay(x*1000))), rxjs.operators.mergeAll()).subscribe(x => console.log(x))
(o/p) 2....4
3) mergeMap: converts all returned observabe according to time that first executs
e.g
rxjs.of(4,3).pipe(rxjs.operators.mergeMap(x => rxjs.of(x).pipe(rxjs.operators.delay(x*1000)))).subscribe(x => console.log(x))
(o/p): 3....4
4) mergeScan: gets old value
e.g
const durationElem = document.getElementById('duration');
// streams
const mouseDown$ = fromEvent(document, 'mousedown');
const mouseUp$ = fromEvent(document, 'mouseup');
// accumulate time mouse held down over time
mouseDown$.pipe(
mergeScan((acc, curr) => {
return interval(1000).pipe(
//scan((a, _) => ++a, 0),
map((val: any) => acc++),
takeUntil(mouseUp$)
)
}, 0)
// output: 1s...2s...3s...4s...
).subscribe(val => durationElem.innerHTML = `${val}s`);
(o/p): press key will get value (keydown),1,2,3,(keyup),(keydown),4,5,6,(keyup)
,
26) Concat:
1) concat (combine): throw each value in sequence
e.g
rxjs.concat(rxjs.of(1), rxjs.of(2), rxjs.of(3)).subscribe(x=>{console.log(x)})
(o/p): 1....2....3
2) concatAll (combine): merge observable value
e.g
rxjs.interval(500).pipe(rxjs.operators.map(x=>rxjs.of(x+10)), rxjs.operators.concatAll(), rxjs.operators.take(5)).subscribe(x=>console.log(x))
(o/p): 11....12....13....14....15
3) concatMap (transform): get observabe data according to sequence that is present
rxjs.of(3000, 1000).pipe(rxjs.operators.concatMap(x=> rxjs.of(x).pipe(rxjs.operators.delay(x)))).subscribe(x => console.log(x))
(o/p): 3000....1000
4) concatMapTo (transform): changes observabel data
rxjs.of(rxjs.of(3000), rxjs.of(1000)).pipe(rxjs.operators.concatMapTo(rxjs.of('hello'))).subscribe(x => console.log(x))
(o/p): hello....hello
27) Error handling:
1) catchError: catch error and need to throw observable
e.g
rxjs.throwError('error occured').pipe(rxjs.operators.catchError(x=> rxjs.of('value: ' + x))).subscribe(x => console.log(x))
(o/p) "value: error occured"
2) retry: refer 17
3) retryWhen: refer 18
------------------------------------------------ Filtering data ------------------------------------------
28) Debounce: Though not as widely used as debounceTime, debounce is important when the debounce rate is variable!
e.g
29) distinct: gives distinct values
e.g
rxjs.of(1,2,3,4,2,1,4,5,2,1).pipe(rxjs.operators.distinct(), rxjs.operators.toArray()).subscribe(x=> console.log(x))
(o/p) [1, 2, 3, 4, 5]
rxjs.of({a: 'a1'}, {a: 'a2'}, {a: 'a3'}, {a: 'a1'}, {a: 'a2'}).pipe(rxjs.operators.distinct(x=>x.a), rxjs.operators.toArray()).subscribe(x=> console.log(x))
(o/p) [{a: 'a1'}, {a: 'a2'}, {a: 'a3'}]
30) distinctUntilChanged: can compare current and previous value
e.g
rxjs.of({a: 'a1'}, {a: 'a1'}, {a: 'a2'}, {a: 'a2'}, {a: 'a2'}).pipe(rxjs.operators.distinctUntilChanged((prev, curr)=> prev.a===curr.a), rxjs.operators.toArray()).subscribe(x=> console.log(x))
(o/p) [{a: 'a1'}, {a: 'a2'}]
31) distinctUntilKeyChanged: verify according to object particular key specified
e.g
rxjs.of({a: 'a1'}, {a: 'a1'}, {a: 'a2'}, {a: 'a2'}, {a: 'a3'}).pipe(rxjs.operators.distinctUntilKeyChanged('a'), rxjs.operators.toArray()).subscribe(x=> console.log(x))
(o/p) [{a: 'a1'}, {a: 'a2'}, {a: 'a3'}]
32) filter: refer 13
33) find: similar to Array.find() get first item creteria match
e.g
rxjs.of({a: 'a1'}, {a: 'a3'}, {a: 'a2', b: 'b2'}).pipe(rxjs.operators.find(x=>x.a==='a2')).subscribe(x=> console.log(x))
(o/p): {a: "a2", b: "b2"}
34) first: gets first selected element
e.g
rxjs.from([1,2,3,4,5]).pipe(rxjs.operators.first(x=>x===2)).subscribe(x=>console.log(x))
(o/p): 2
rxjs.from([1,2,3,4,5]).pipe(rxjs.operators.first(x=>x>20), 'Nothing').subscribe(x=>console.log(x))
(o/p): Nothing
35) last: similar to first but reverse
36) defer: stores data at the time of cresting observable and gives that result while subscription
e.g
const s1 = of(new Date()); //will capture current date time
const s2 = defer(() => of(new Date())); //will capture date time at the moment of subscription
console.log(new Date());
timer(2000)
.pipe(
switchMap(_ => merge(s1, s2))
).subscribe(console.log);
(o/p): 2020-10-11T12:59:46.466Z....2020-10-11T12:59:46.466Z....2020-10-11T12:59:48.472Z
37) generate: is some what similar to for loop, first argument is value, second argument is condtion and thired is increment
e.g
rxjs.generate(2, x=> x<10, x=>x+3).subscribe(x=>console.log(x))
(o/p): 2....5....8
38) range: throws value in specified range
e.g
rxjs.range(1,5).pipe(rxjs.operators.toArray()).subscribe(x=>console.log(x))
(o/p): [1, 2, 3, 4, 5]
39) throwError: used to throw error with message
e.g
rxjs.throwError('This is an error!');
------------------------------------------------ Combination data ------------------------------------------
40) combineLatest: takes multiple observable and emits value for last observable each value with previous observables last value
e.g
rxjs.combineLatest(rxjs.of(1,2,3), rxjs.of(4,5,6), rxjs.of(7,8,9)).pipe(rxjs.operators.toArray()).subscribe(x => console.log(x))
(o/p) [[3, 6, 7], [3, 6, 8], [3, 6, 9]]
41) combineAll: combines each results of observable
e.g
rxjs.interval(1000).pipe(rxjs.operators.map(x=> rxjs.interval(1000).pipe(rxjs.operators.take(3))), rxjs.operators.take(2)).pipe(rxjs.operators.combineAll()).subscribe(x=>console.log(x, new Date())); console.log(new Date())
(o/p):
[0, 0] Sun Oct 11 2020 19:40:30 GMT+0530 (India Standard Time)
[1, 0] Sun Oct 11 2020 19:40:31 GMT+0530 (India Standard Time)
[1, 1] Sun Oct 11 2020 19:40:31 GMT+0530 (India Standard Time)
[2, 1] Sun Oct 11 2020 19:40:32 GMT+0530 (India Standard Time)
[2, 2] Sun Oct 11 2020 19:40:32 GMT+0530 (India Standard Time)
42) endWith: addes last value.
e.g
rxjs.of(1,2,3).pipe(rxjs.operators.endWith('end number'), rxjs.operators.toArray()).subscribe(x=>console.log(x))
(o/p): [1, 2, 3, "end number"]
43) startWith: addes first value.
e.g
rxjs.of(1,2,3).pipe(rxjs.operators.endWith('start number'), rxjs.operators.toArray()).subscribe(x=>console.log(x))
(o/p): ['start number', 1, 2, 3]
44) pairwise: paires previous and and current value
e.g
rxjs.of(1,2,3,4).pipe(rxjs.operators.pairwise()).subscribe(x=>console.log(x))
(o/p): [1,2]....[2,3]....[3,4]
45) race(): it containes multiple observable, and returns observable value that first returns
e.g
rxjs.race(rxjs.of('first.').pipe(rxjs.operators.delay(1000)), rxjs.of('second.').pipe(rxjs.operators.delay(2000))).subscribe(x=>console.log(x))
(o/p): first.
46) withLatestFrom: get combined result of provided observable and also starts when provided observable emits first value
e.g
rxjs.interval(500).pipe(rxjs.operators.withLatestFrom(rxjs.interval(2000)), rxjs.operators.take(5)).subscribe(x=>console.log(x))
(o/p)
[3, 0]
[4, 0]
[5, 0]
[6, 0]
[7, 1]
47) zip: get result of all observable and get result of all at a time
e.g
rxjs.zip(rxjs.of(1), rxjs.of(2), rxjs.of(3)).subscribe(x=>console.log(x))
(o/p): [1, 2, 3]
48) Forkjoin: used to get result of multiple observbles, if any observable fails than error is thrown and observable hows values were successed will not get.
e.g
rxjs.forkJoin({
google: rxjs.ajax.ajax.getJSON('https://api.github.com/users/google'),
microsoft: rxjs.ajax.ajax.getJSON('https://api.github.com/users/microsoft'),
users: rxjs.ajax.ajax.getJSON('https://api.github.com/users')
}).subscribe(console.log)
(o/p): {
google: <api_result>
microsoft: <api_result>,
users: <api_result>
}
______________________________________Note____________________________________________________
Understanding difference between forkjoin, combineLatest, withLatestFrom & zip
type Color = 'white' | 'green' | 'red' | 'blue';
type Logo = 'fish' | 'dog' | 'bird' | 'cow';
const color$ = new Subject<Color>();
const logo$ = new Subject<Logo>();
combineLatest(color$, logo$)
.subscribe(([color, logo]) => console.log(`${color} shirt with ${logo}`));
(o/p):
white shirt with fish
green shirt with fish
green shirt with dog
red shirt with dog
red shirt with bird
blue shirt with bird
zip(color$, logo$)
.subscribe(([color, logo]) => console.log(`${color} shirt with ${logo}`));
(o/p):
white shirt with fish
green shirt with dog
red shirt with bird
// the master slave operator
color$ // master
.pipe(withLatestFrom(logo$) // slave)
.subscribe(([color, logo]) => console.log(`${color} shirt with ${logo}`));
(o/p):
green shirt with fish
red shirt with dog
blue shirt with bird
forkJoin(color$, logo$)
.subscribe(([color, logo]) => console.log(`${color} shirt with ${logo}`));
(o/p): will get no output till the selected observable is completed
// color$.complete();
// logo$.complete();
after this (o/p): red shirt with bird
color$.next('white');
logo$.next('fish');
color$.next('green');
logo$.next('dog');
color$.next('red');
logo$.next('bird');
color$.next('blue');
_______________________________________________Note End____________________________________________________
49) sample: Sample from source when provided observable emits. when sample is triggered than source value is showed
e.g
const source = zip(from(['Joe', 'Frank', 'Bob']), interval(2000));
const example = source.pipe(sample(interval(2500)));
const subscribe = example.subscribe(val => console.log(val));
(o/p): (after 2500) ["Joe", 0]..(after 2500)..["Frank", 1]
e.g
merge(fromEvent(document, 'mousedown').pipe(mapTo(false)),
fromEvent(document, 'mousemove').pipe(mapTo(true)))
.pipe(sample(fromEvent(document, 'mouseup')))
.subscribe(isDragging => {
console.log('Were you dragging?', isDragging);
})
(o/p): (click mouse and leave) Were you dragging? false
(o/p): (click mouse, drag at another location and leave) Were you dragging? true
50) skip: Skip allows you to ignore the first x emissions from the source
e.g
const numArrayObs = from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const skipObs = numArrayObs.pipe(skip(2)).subscribe(console.log);
(o/p): 3,4,5,6,7,8,9,10
51) skipUntil: Skip emitted values from source until provided observable emits. similar to takeUntil
e.g
const source = interval(1000);
source.pipe(skipUntil(timer(6000))).subscribe(val => console.log(val));
(o/p) 5...6...7...8....
52) skipWhile: skiping till particular condition passes at first time
e.g
const source = interval(1000);
source.pipe(skipWhile(val => val < 5)).subscribe(val => console.log(val))
(o/p) 5...6...7...8....
53) takeWhile: reverse of skpiWhile
e.g
of(1, 2, 3, 4, 5, 6).pipe(takeWhile(val => val <= 4)).subscribe(val => console.log(val));
(o/p) 1,2,3,4
54) throttle: will emits the value after particular interval
e.g:
rxjs.interval(1000).pipe(rxjs.operators.take(10),rxjs.operators.throttle(rxjs.interval(2000))).subscribe(console.log)
(o/p): 0....3....6....9
55) throttleTime:
e.g
rxjs.interval(1000).pipe(rxjs.operators.take(10), rxjs.operators.throttleTime(2000)).subscribe(console.log)
(o/p): 0....3....6....9