JavaScript无限循环问题：如何实现0/1定时切换且不冻结网页？

嗨，我来帮你揪出代码卡顿的原因，再给你两种实用的修改方案！

问题根源 #

你这段代码的核心问题出在那个无限for (;;)循环上：

• JavaScript是单线程语言，这个同步的无限循环会霸占主线程，根本不给浏览器处理其他任务的机会；
• 更糟的是，你在循环里写了setTimeout(showBit(), 2000)——这里的showBit()是直接调用函数，而不是传递函数引用，等于瞬间执行了无数次showBit，同时还把海量的定时器任务塞进事件队列，直接把浏览器搞崩。

方案一：递归式setTimeout（推荐，灵活可控） #

这种方式会在每次定时器触发并执行完逻辑后，再设置下一个定时器，不会一下子堆出无数任务，完全不会阻塞主线程：

<div id="bit" style="width: 100px; height: 100px; margin: auto; border: 1px solid #000; text-align: center;"></div>
<script>
let bitValue = 0;
const bitElement = document.getElementById("bit"); // 提前缓存DOM元素，避免重复查询

function showBit() {
  bitElement.textContent = bitValue; // 用textContent比innerHTML更安全高效
  bitValue = bitValue === 0 ? 1 : 0; // 替换Math.abs写法，更直观
  // 执行完当前逻辑后，再调度下一次执行
  setTimeout(showBit, 2000); // 注意这里不要加括号，只传函数名
}

// 启动第一次执行
showBit();
</script>

方案二：setInterval（适合固定间隔的简单循环） #

如果你的逻辑不需要灵活调整间隔时间，用setInterval会更简洁：

<div id="bit" style="width: 100px; height: 100px; margin: auto; border: 1px solid #000; text-align: center;"></div>
<script>
let bitValue = 0;
const bitElement = document.getElementById("bit");

function showBit() {
  bitElement.textContent = bitValue;
  bitValue = bitValue === 0 ? 1 : 0;
}

// 设置每2秒执行一次showBit
const intervalId = setInterval(showBit, 2000);
// 立刻执行一次，避免等待2秒才看到第一个数字
showBit();

// 后续如果需要停止循环，可以调用 clearInterval(intervalId);
</script>

额外优化点 #

• 用textContent替代innerHTML：只是更新纯文本的话，textContent更安全（避免XSS风险）也更高效；
• 提前缓存DOM元素：不要每次都调用getElementById，查询DOM是比较耗时的操作，缓存起来复用更好；
• 直接用三元表达式切换值：比Math.abs(bitValue - 1)更直观易懂。

内容的提问来源于stack exchange，提问作者Gazzieh