infinite-timeouts.html

<html>
  <head>
    <link rel="stylesheet" href="css/loops.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/3d-buttons.css">
    <style>
      body {
        flex-direction: column;
        margin: 10vmin;
        max-height: 100vh;
      }
    </style>
  </head>
  <body>
    <script style="display: block; white-space: pre; font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 2em;">
      let numberOfTasks = 0;

      function start() {
        const count = document.getElementById('count');
        count.innerHTML = numberOfTasks++;
        setTimeout(start);
      }
    </script>
    <script>
      function stop() {
        start = function () {}
      }
    </script>
    <h2 id="count" style="min-height: 2em"></h2>
    <div style="display: flex; justify-content: space-around">
      <button onclick="start()">Start timeouts</button>
      <button style="--hue: 0" onclick="stop()">Stop madness</button>
    </div>
  </body>
</html>