JSFiddle - React, Tailwind, and code Playground
HTML
<div id="box"></div>
CSS
#box {
width: 300px;
height: 300px;
margin: auto;
}
JavaScript
var box = document.getElementById("box");
var delay = 1000;
box.onmousedown = function() {
delay = (delay > 0 ? 0 : 1000);
}
function draw() {
box.style.backgroundColor = toggle ? 'rgb(207,6,6)' : 'rgb(6,6,207)';
toggle = !toggle;
}
draw();
var toggle = false;
var lastFrameTime = 0;
function animate() {
var timeSinceLast = performance.now() - lastFrameTime;
if (timeSinceLast > delay) {
lastFrameTime = performance.now();
draw();
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);