How can I create an observable with a delay

by

Using the following imports:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

Try this:

let fakeResponse = [1,2,3];
let delayedObservable = Observable.of(fakeResponse).delay(5000);
delayedObservable.subscribe(data => console.log(data));

UPDATE: RXJS 6

The above solution doesn’t really work anymore in newer versions of RXJS (and of angular for example).

So the scenario is that I have an array of items to check with an API with. The API only accepts a single item, and I do not want to kill the API by sending all requests at once. So I need a timed release of items on the Observable stream with a small delay in between.

Use the following imports:

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

Then use the following code:

const myArray = [1,2,3,4];

from(myArray).pipe(
        concatMap( item => of(item).pipe ( delay( 1000 ) ))
    ).subscribe ( timedItem => {
        console.log(timedItem)
    });

It basically creates a new ‘delayed’ Observable for every item in your array. There are probably many other ways of doing it, but this worked fine for me, and complies with the ‘new’ RXJS format.

More Related Contents:

  1. async/await in Angular `ngOnInit`
  2. Angular – Make multiple HTTP calls sequentially
  3. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  4. Merging http observables using forkjoin
  5. How to return observable from subscribe
  6. How to return value inside subscribe Angular 4
  7. Delegation: EventEmitter or Observable in Angular
  8. Angular 2 / 4 / 5 not working in IE11
  9. How to reload the current route with the angular 2 router
  10. The Angular Compiler requires TypeScript >=3.4.0 and
  11. Should I write methods as arrow functions in Angular’s class
  12. Angular 2 – Return data directly from an Observable
  13. Dynamically load external javascript file from Angular component
  14. caching results with angular2 http service [duplicate]
  15. Property ‘files’ does not exist on type ‘EventTarget’ error in typescript
  16. How to create an RXjs RetryWhen with delay and limit on tries
  17. How to access a constant in an Angular 2 component and service?
  18. Is there a type for “Class” in Typescript? And does “any” include it?
  19. angular 2 – adding 3rd party libs
  20. Ionic – Horizontal scroll tab for Categories [duplicate]
  21. How to extend / inherit components?
  22. Difference between interfaces and classes in Typescript
  23. Detect changes in objects inside array in Angular2
  24. Lazy Loading BrowserModule has already been loaded
  25. Angular 2 input parameters on root directive [duplicate]
  26. Angular 2: How to use JavaScript Date Object with NgModel two way binding
  27. Unit testing click event in Angular
  28. want to show more data in another component when view in detail button is clicked (angular 6)
  29. @Input() value is always undefined
  30. How to pass results between chained observables

Leave a Comment