JSFiddle - React, Tailwind, and code Playground

by Jaume Vinyes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.12/Rx.min.js"></script>
<body>
  <input type="text" id="example" />
</body>

JavaScript

const source$ = Rx.Observable
  .fromEvent(document.getElementById('example'), 'keyup')
  .map(i => i.currentTarget.value)
  .debounceTime(500)
	.switchMap(value => Rx.Observable.fromPromise(callApi(value))  
  	.map(response => response))
  .subscribe(val => console.log(val));
  
  
  
  
  
  
  // This is just mocking a real API call
 const callApi = value => {
  var operationTime  = value.length * 1000; // The cal lwill take as many seconds as the number of typed chars
  console.log(`Starting call ${value}`);
  return new Promise((resolve) => {
    setTimeout(() => resolve(`API call ${value} finished in ${operationTime}`), operationTime)
  });
}