JSFiddle - React, Tailwind, and code Playground

by mpcteamkvet

HTML

<div id="promise" class="block">Promise</div>

<button id="start">TEST PROMISE BEHAVIOR</button>

CSS

.block {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: steelblue;
}

JavaScript

var chain = function(thenable) {
	for(var i = 0; i < 1e2*3; i++) {
  	thenable = thenable
    	.then(function(el) { el.style.backgroundColor = 'black'; return el })
      .then(function(el) { el.style.backgroundColor = 'white'; return el })
  }
  return thenable;
};

document.getElementById('start').addEventListener('click', function() { 	
  chain(Promise.resolve(document.getElementById('promise'))).then(function(el) { el.style.backgroundColor = 'steelblue'; return el });
}, false)