Rx Observable combineLatest

by Mario_Rivis

HTML

<title>bufferCount</title>
<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script>
<input id="my-input" type="number">
 Thumbnail
 <input id="my-checkbox" type="checkbox"/>
  
 <img id="my-img" src="https://images.unsplash.com/photo-1499084732479-de2c02d45fcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"/>

JavaScript

const myInput = document.getElementById('my-input');
const myCheckbox = document.querySelector('#my-checkbox');

Rx.Observable.fromEvent(document, 'click')
  .map(event => event.clientX)
  .filter(val => val < 200)
  .debounceTime(1000)
	.subscribe(console.log);
  
  
Rx.Observable.fromEvent(myInput, 'input')
    .debounceTime(300)
    .subscribe(event => console.log(event.target.value));
    
Rx.Observable.ajax('https://jsonplaceholder.typicode.com/photos/10')
	.map(ajaxRes => ajaxRes.response)
	.subscribe(
  	response => console.log(response),
    err => console.log(err),
    () => console.log('complete')
  );
  
  
const timer1$ = Rx.Observable.timer(1000, 4000);
const timer2$ = Rx.Observable.timer(2000, 4000);
const timer3$ = Rx.Observable.timer(3000, 4000);

Rx.Observable.combineLatest(timer1$, timer2$, timer3$)
	.subscribe(values => console.log(values));

const photoId$ = Rx.Observable.fromEvent(myInput, 'input')
    .debounceTime(300)
    .map(event => event.target.value)
    .filter(id => id && id !== '');



const thumbnail$ = Rx.Observable.fromEvent(myCheckbox, 'input')
    .map(event => event.target.checked);
  

const subscription = Rx.Observable.combineLatest(photoId$, thumbnail$)
     .switchMap(values => {
     [id, isThumbnail] = values;
     return Rx.Observable
              .ajax('https://jsonplaceholder.typicode.com/photos/'+id)
              .map(ajaxRes => ajaxRes.response)
              .map(res => {
              	return isThumbnail? res.thumbnailUrl: res.url;
              })
     })
    .subscribe(
       url => document.getElementById("my-img").src = url,
       err => console.log(err),
       complete => console.log('complete'));