JSFiddle - React, Tailwind, and code Playground
HTML
<div id="blueBox" class="blue box"></div>
<div id="redBox" class="red box"></div>
<p id="countdown"></p>
<ul id="events"></ul>
CSS
.box {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.blue {
background: #3333cc;
z-index: 1;
}
.red {
background: #cc3333;
z-index: 0;
}
#countdown {
margin-top: 110px;
}
JavaScript
/* Original CoffeeScript:
*/
var $blueBox, $countdown, $events, $redBox, afterClick, mouseenterTimeStamp, reset, timeoutHandle;
$blueBox = $('#blueBox');
$redBox = $('#redBox');
$countdown = $('#countdown');
$events = $('#events');
mouseenterTimeStamp = 0;
timeoutHandle = null;
(reset = function() {
$countdown.html = 'Click the box to start recording events';
return $events.append('<li><strong>RESET</strong></li>');
})();
$blueBox.click(function(e) {
var timeDiff;
timeDiff = e.timeStamp - mouseenterTimeStamp;
console.log((new Date).getTime() - e.timeStamp);
$events.append("<li><span class='blue'>BLUE</span> box clicked " + timeDiff + "ms after mouseenter</li>");
return afterClick();
});
$redBox.click(function(e) {
var timeDiff;
timeDiff = e.timeStamp - mouseenterTimeStamp;
console.log((new Date).getTime() - e.timeStamp);
$events.append("<li><span class='red'>RED</span> box clicked " + timeDiff + "ms after mouseenter</li>");
return afterClick();
});
afterClick = function() {
var blueZ, redZ;
blueZ = $blueBox.css('zIndex');
redZ = $redBox.css('zIndex');
$blueBox.css('zIndex', redZ);
$redBox.css('zIndex', blueZ);
return false;
};
$blueBox.mouseenter(function(e) {
var startTime;
mouseenterTimeStamp = e.timeStamp;
startTime = (new Date).getTime();
while ((new Date).getTime() - startTime < 1000) {
continue;
}
$events.append('<li><strong>MOUSEENTER</strong> caused 1s delay');
setTimeout((function() {
return $events.append('<li>TIMEOUT 0 at end of mouseenter</li>');
}), 0);
timeoutHandle = setTimeout((function() {
return $events.append('<li>TIMEOUT 0');
}));
return false;
});