infinite-promises.html

<html>
  <head>
    <title>Infinite promises</title>
    <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;
      }
    </style>
  </head>
  <body>
    <script style="display: block; white-space: pre; font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 2em;">
      let numberOfMicrotasks = 0;

      function start() {
        const count = document.getElementById('count');
        count.innerHTML = numberOfMicrotasks++;
        Promise.resolve().then(start);
      }
    </script>
    <script>
      function stop() {
        window.start = () => {};
      }
    </script>
    <div class="text" id="count"></div>
    <div style="display: flex; justify-content: space-around">
      <button onclick="start()">Start promising</button>
      <button style="--hue: 0" onclick="stop()">Stop madness</button>
    </div>
  </body>
</html>