RxJS: activate operation after a timeout.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Experiments with RxJS</h1>
    
    <div id="results"></div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
    <script src="script.js"></script>
  </body>

</html>

// https://github.com/Reactive-Extensions/RxJS/

// Generic code to display resuts

var results = document.getElementById('results');
function showHTML(html)
{
  results.insertAdjacentHTML('beforeend', html);
}
function show(text)
{
  showHTML("<p>" + text + "<p>");
}
function showObject(obj)
{
  show("<p>" + JSON.stringify(obj) + "<p>");
}

// Make a promise out of a timeout - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
function promiseInTime(timeout, value, willReject)
{
  return new Promise(
    // The resolver function is called with the ability to resolve or reject the promise
    function(resolve, reject) 
    {
      window.setTimeout(
        function afterTimeout() 
        {
          if (willReject)
          {
            // No luck
            reject(value);
          }
          else
          {
            // We fulfill the promise!
            resolve(value);
          }
        }, timeout);
    }
  );
}

// The real code
function test(loadTime)
{
  var prom = promiseInTime(loadTime, { id: 'First'}); // Return data after a while
  var restO = Rx.Observable.fromPromise(prom);
  
  //var load = Rx.Observable.timer(750).do(function () { show('Showing a loading spinner'); });
  var load = Rx.Observable.timer(750);
  var loadD = load.subscribe(
    undefined,
    undefined,
    function onComplete() { show('Showing a loading spinner'); });

  //var o = Rx.Observable.merge(restO, load).switch();
  restO.subscribe(
    function onNext(v) { show('Next - ' + JSON.stringify(v)); },
    function onError(e) { show('Error - ' + JSON.stringify(e)); },
    function onComplete() { show('Done'); loadD.dispose(); }
  );
}

function testRx(loadTime)
{
  var prom = promiseInTime(loadTime, { id: 'First'}); // Return data after a while
  var restService$ = Rx.Observable.fromPromise(prom);
  
  var resolvedProm = promiseInTime(0, null);
  var obs$ = Rx.Observable.fromPromise(resolvedProm)
    .concat(restService$);
  
  var loading$ = Rx.Observable.timer(0, 750)
    .take(2);

  show(`Showing a loading spinner for: ${loadTime}`);
  
  Rx.Observable.combineLatest(obs$, loading$)
    .map(([value, time]) => {
      console.info(value, time);
      if (value === null) {
        console.info('LOADING');
      }
      return value;
    })
    .subscribe(
      function onNext(v) { show('Next - ' + JSON.stringify(v)); },
      function onError(e) { console.error(e); },
      function onComplete() { show('Done'); }
  );
  
  // Rx.Observable.zip(restService$, loading$, (value, time) => value)
  //   .subscribe(
  //     function onNext(v) { show('Next - ' + JSON.stringify(v)); },
  //     function onError(e) { show('Error - ' + JSON.stringify(e)); },
  //     function onComplete() { show('Done'); }
  // );
}

testRx(500);
// testRx(3000);

#dragTarget
{
    background-image: url(https://raw.githubusercontent.com/Reactive-Extensions/RxJS/master/examples/dragndrop/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 200px;
    width: 200px;
    background-color: #000000;
    border: 1px solid #666666;
    color: #ffffff;
    padding: 10px;
    position: absolute;
    cursor: move;
}

# Experiments with RxJS

Trying Reactive Extensions for JavaScript.

Playground to experiments with some operator combinations / use cases / etc.