34:["$","title",null,{"children":"RxJS: inserting a delay between each item of a stream | btheado | Observable"}] 3c:T54c,svg` `3d:T7e9,svg` `3e:T61e,svg``3f:T634,svg``40:T8a9,svg``41:T8a5,svg` `42:T8a5,svg` `43:T8a8,svg``44:[] 38:{"id":"ae5aa18ee1134fd9","slug":"rxjs-inserting-a-delay-between-each-item-of-a-stream","title":"RxJS: inserting a delay between each item of a stream","thumbnail":"13b30ead24f9a21dd2881a187436ec7b8f507878172778b12702b852948bd33f","access_level":"public","create_time":"$D2018-06-27T23:53:03.154Z","update_time":"$D2018-07-07T15:45:15.124Z","view_time":null,"first_public_time":"$D2018-06-29T02:21:33.830Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"2c0fcccea99387d7","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":"starter_2024","bio":"","following":false},"version":151,"publish_version":151,"role":null,"authored":false,"authors":[{"type":"individual","id":"46fc8e968a5255ec","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"46fc8e968a5255ec","login":"btheado","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8315783a6ce8d9c8019f396006c77dcba615bbc93819e5644a289a7ca704ffcf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"RxJS: inserting a delay between each item of a stream","cells":[{"id":0,"value":"md`# RxJS: inserting a delay between each item of a stream`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`Helper function to display RxJS stream values as output from a cell:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"observeRx = observable => \n Generators.observe(\n next => observable.subscribe(\n output => next(output)\n )\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`RxJS values can come all at once in which case only the last value will be seen as cell output:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"observeRx(Rx.from([1,2,3]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`Here is a marble diagram (thanks to https://rxviz.com/) to visualize over time how the values come out of the stream:`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`The \\`interval\\` constructor provides an infinite stream of output with delay between each, so changing values can be seen:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"observeRx(Rx.interval(1000))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`Is there a way to stretch out a stream of values over time? Transform a stream which has all the values immediately available into one with a delay in between each? Based on its name, the RxJS \\`delay\\` operator sounds promising.\n\nThe \\`timeInterval\\` operator is used to show how long since the previous event. This will help judge if the desired result is accomplished`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"observeRx(\n Rx.range(0,50).pipe(\n Rx.operators.delay(1000),\n Rx.operators.timeInterval(),\n Rx.operators.startWith(md`no values yet`)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`The delay operator delayed the start of the stream, but after the delay all 50 values came at once, so it didn't achieve the desired effect.\n\nMaybe the \\`map\\` operator can be used to map the delay onto each stream item.\n\nBut the \\`map\\` operator works on values from the stream and the \\`delay\\` operator needs a stream. Therefore \\`Rx.of\\` is used to create a stream from a single value. But then that stream needs converted back into a value, so \\`mergeMap\\` operator is used:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"observeRx(\n Rx.range(0,50).pipe(\n Rx.operators.mergeMap(i => Rx.of(i).pipe(Rx.operators.delay(1000))),\n Rx.operators.timeInterval(),\n Rx.operators.startWith(md`no values yet`)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`Annnnd it still doesn't work. Adding a delay from the same starting point in time to each item still has them finishing all at the same time.\n\nThey are all starting at the same time, so in order to get them to finish at increasingly later times, the delay for each item needs to increase:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"observeRx(\n Rx.range(0,50).pipe(\n Rx.operators.mergeMap(i => Rx.of(i).pipe(Rx.operators.delay((i+1)*1000))),\n Rx.operators.timeInterval(),\n Rx.operators.startWith(md`no values yet`)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`Or it turns out using the \\`concatMap\\` operator instead of \\`mergeMap\\` achieves the same goal without resorting to a variable delay. It seems that \\`mergeMap\\` starts all the streams at the same time and merges the values together into a single stream, whereas \\`concatMap\\` waits for each stream to finish before starting the next one:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"observeRx(\n Rx.range(0,50).pipe(\n Rx.operators.concatMap(i => Rx.of(i).pipe(Rx.operators.delay(1000))),\n Rx.operators.timeInterval(),\n Rx.operators.startWith(md`no values yet`)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`A third way to achieve the goal is to use the \\`zip\\` operator. It seems to synchronize items from multiple streams. It waits for each stream to have a value before emitting any value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"observeRx(\n Rx.zip(\n Rx.range(0,50),\n Rx.interval(1000),\n (a,b) => a).\n pipe(\n Rx.operators.timeInterval(),\n Rx.operators.startWith(md`no values yet`)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`\\`combineLatest\\` is similar to \\`zip\\`, but it doesn't synchronize. It will greedily take as many values as possible from each stream. So this one also doesn't achieve the desired result`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"observeRx(\n Rx.combineLatest(\n Rx.range(0,50),\n Rx.interval(1000),\n (a,b) => [a,b]).\n pipe(\n Rx.operators.timeInterval(),\n Rx.operators.startWith(md`no values yet`)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"Rx = require('rxjs@6.2.1/bundles/rxjs.umd.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 33:null