JSFiddle - React, Tailwind, and code Playground

by Sir_Pepe

HTML

<div class="message">Alte Nachricht</div>

<p><input type="button" value="Neue Nachricht anzeigen" /></p>

CSS

.message {
  background: yellow;
  border: 2px solid black;
  padding: 2em;
}

JavaScript

function loadAndDisplay($el){
  async(function*(){
    var [newMessage] = yield $.when(
      $.post('/echo/html/', { html: 'Neue Nachricht', delay: 2 }),
      $el.hide('slow').promise()
    );
    yield $el.text(newMessage).show('slow').promise();
    return console.log('Fertig!');
  });
}




$('[type=button]').click(function(){
  $(this).attr('disabled', true);
  loadAndDisplay($('.message'));
});

function async(genFn){
  var gen = genFn();
  var resume = function(promise){
    return promise.done(function(text){
      var next = gen.next(text);
      if(!next.done){
        return resume(next.value);
      }
    }).fail(function(err){
      gen.throw(err.status);
    });
  };
  return resume(gen.next().value);
}