JSFiddle - React, Tailwind, and code Playground

by jlaw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.min.js"></script>
<div>
  <div class="trigger"></div>
  <div class="response"></div>
  <div class="kept"></div>
</div>

CSS

.trigger, .response, .kept {
  height: 100px;
  min-height: 100px;
  display: block;
  border: 1px solid black;
  padding: 10px;
}

Babel + JSX

console.clear();
const list = [1, 2, 3, 4, 5];
const promises = [];

function triggerRequest(item) {
  console.log(item);
  const promise = sendRequest(item);
  $('.trigger').append('<div>Triggered request for '+item+'</div>');
  return promise.then((result) => {
    $('.response').append('<div>resolved '+item+'</div>');
  });
};

list.forEach((item, index) => {
	setTimeout(() => {
    const result = triggerRequest(item);
    result.then(() => {
	    $('.kept').empty();
		  $('.kept').append('<div>kept: '+item+'</div>');
    });
  }, 500 * index);
});

function sendRequest(val) {
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{resolve('result for '+val);},Math.random() * 5000);
  });
};