Published
Edited
Feb 8, 2020
SlowWriterFactory = {
const {Subject, interval, concat} = Rx;
const {map, take, startWith, concatMap} = Operators;
return class SlowWriterFactory {
static createWriter() {
const messages$ = new Subject();
const writer$ = messages$.pipe(
concatMap(([message, delay]) => {
const length = message.length;
return interval(delay).pipe(
take(length - 1),
map(index => index + 1),
startWith(0),
map(index => message[index]),
)
})
);
return {
getWriter: () => writer$,
write: (message, delay) => messages$.next([message, delay])
}
}
}
}
{
const {Subject} = Rx;
const htmlContainer = html`<pre></pre>`;
const htmlWriter$ = new Subject();
htmlWriter$.subscribe(content => htmlContainer.innerHTML += content);
const slowWriter = SlowWriterFactory.createWriter();
slowWriter.getWriter().subscribe(htmlWriter$);
slowWriter.write('Ciao, come va?\n', 100);
setTimeout(() => slowWriter.write('Tutto bene, grazie\n', 100), 3000);
setTimeout(() => slowWriter.write('Cosa fai stasera?\n', 100), 6000);
return htmlContainer;
}
Operators = import('rxjs/_esm5/operators')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
