JSFiddle - React, Tailwind, and code Playground

by weiming le

HTML

<table>
  <tr>
    <th>type</th>
    <th>calls</th>
    <th>seconds</th>
    <th>average calls/second</th>
  </tr>
  <tr id="i">
    <td>setInterval</td><td>0</td><td>0</td><td>0</td>
  </tr>
  <tr id="t">
    <td>setTimout</td><td>0</td><td>0</td><td>0</td>
  </tr>
</table>

CSS

table,th,td{border:1px solid black}th,td{padding:.2em .4em .3em}th{font-weight:bold;background-color:#89C}td{background-color:#BCF}

JavaScript

var speed = 1000
var start = +new Date
var icounter = 0
var tcounter = 0
var i = document.querySelector('#i')
var t = document.querySelector('#t')
setInterval(function () {
  var time = (new Date - start) / 1000
  var avg  = icounter++ / time
  i.innerHTML = '<td>setInterval</td><td>' + icounter + '</td><td>' + time.toFixed(3) + '</td><td>' + avg.toFixed(6) + '</td>'
}, speed)
function e () {
  var time = (new Date - start) / 1000
  var avg  = tcounter++ / time
  t.innerHTML = '<td>setTimout</td><td>' + tcounter + '</td><td>' + time.toFixed(3) + '</td><td>' + avg.toFixed(6) + '</td>'
  setTimeout(e, speed)
}
setTimeout(e, speed)