JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div id="button" onclick="bolAnim = false">STAP</div>

<div id="test"></div>

CSS

#button, #test {
  border: 1px solid #000;
  padding: 5px;
  margin-bottom: 5px;
}

#test {
  clear: both;
  overflow:hidden;
}

#test > div {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #006E00;
  margin-right: 1px;
  margin-top: 1px;
  float:left;
}

JavaScript

// requestAnimationFrame test
var bolAnim = true, testElem;

function repeatOften() {
  // Do whatever
  testElem.appendChild(document.createElement('div'));
  
  if (bolAnim) {
  	requestAnimFrame(repeatOften);
  }
}

window.addEventListener('load', function () {
  window.requestAnimFrame = (
    window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     || 
    function(callback){
      window.setTimeout(callback, 1000 / 30);
    }
  );
	testElem = document.getElementById('test');
  requestAnimFrame(repeatOften);
});