JSFiddle - React, Tailwind, and code Playground

by Sir_Pepe

HTML

<div id="Container">
  <p id="Alpha"></p>
  <p id="Beta"></p>
  <p id="Gamma"></p>
</div>

<p>
    <button id="Start">Start!</button>
</p>

CSS

#Container {
  border: 2px solid blue;
  background: skyblue;
  padding: 1em;
  margin: 1em;
}
p {
  margin: 1em;
}

JavaScript

// Asynchroner Code, synchron geschrieben
var genFn = function*(){
  var alpha = yield $.post('/echo/html/', { html: 'Test 1', delay: 1 });
  $('#Alpha').text(alpha);
  var beta = yield $.post('/echo/html/', { html: 'Test 2', delay: 1 });
  $('#Beta').text(beta);
  var gamma = yield $.post('/echo/html/', { html: 'Test 3', delay: 1 });
  $('#Gamma').text(gamma);
}
var gen = genFn();

function sequence(generator, value){
  var next = gen.next(value);
  if(!next.done){
    var promise = next.value;
    promise.then(function(text){
      sequence(generator, text);
    }, function(err){
      generator.throw(err);
    });
  }
};

$('#Container').hide();

$('#Start').click(function(){
  $('#Container').show(1000).promise()
    .then(function(){
      sequence(gen);
    })
    .then(function(){
      // return $('#Container').hide(1000).promise();
    });
});