Изменение текста элемента с помощью setTimeout внутри бесконечного цикла

Условие

Нужно определить, как будет вести себя страница, когда в обработчике события DOMContentLoaded запускается бесконечный цикл while, внутри которого на каждой итерации ставится отложенный вызов setTimeout. Этот таймер обновляет содержимое элемента на странице.

<html>
<head>
  <title>JS test 2</title>
</head>
<body>
  <div id="container">0</div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const hostEl = document.getElementById('container');
      let counter = 0;

      while (true) {
        setTimeout(() => {
          hostEl.innerText = counter++;
        }, 10);
      }
    });
  </script>
</body>
</html>

Ответ

Бесконечный синхронный while блокирует основной поток: callbacks таймеров не выполняются, счётчик не увеличивается. Страница зависнет и может исчерпать память из-за накопления таймеров.

setTimeout не приостанавливает цикл и не переносит сам while в фон. Пока обработчик DOMContentLoaded не вернул управление, задачи таймеров не могут начать исполнение. Поэтому код не показывает растущий счётчик.

Для периодического обновления используйте один setInterval или рекурсивный setTimeout с условием остановки. Например, один таймер может устанавливать hostEl.textContent = String(++counter); каждые 1000 мс. Для визуальной анимации подходит requestAnimationFrame. Сам опасный цикл запускать для проверки не требуется.