如何在JS中实现不冻结页面的永久循环？

核心原因很明确：while(true)是同步阻塞循环，会霸占JavaScript单线程，导致浏览器无法处理UI渲染、用户输入或其他脚本，必然引发页面冻结。要实现非阻塞的永久循环，必须利用JS的异步事件机制，以下是两种适配游戏场景的可行方案：

方案1：使用requestAnimationFrame（游戏场景首选） #

这是浏览器专为动画、游戏开发提供的API，会和浏览器刷新帧率（通常60fps）同步执行回调，每次执行后主动归还线程控制权给浏览器，完全不会阻塞页面。

实现逻辑 #

用递归调用requestAnimationFrame模拟循环，同时通过全局标志位控制循环启停：

// Blockly生成的代码示例
let loopRunning = true;

function gameLoop() {
  if (!loopRunning) return;
  // 此处放置单帧游戏逻辑（如角色移动、碰撞检测、画面渲染）
  updatePlayerPosition();
  checkCollisions();
  renderGameScreen();
  // 递归调用维持循环
  requestAnimationFrame(gameLoop);
}

// 启动循环（对应「开始永久执行」积木）
gameLoop();

// 停止循环（对应「停止永久执行」积木）
function stopLoop() {
  loopRunning = false;
}

Blockly积木封装方式 #

• 制作一个「永久执行游戏逻辑」的容器积木，内部生成上述gameLoop函数的初始化与启动代码。
• 制作一个独立的「停止永久执行」积木，生成stopLoop()调用代码。
• 将具体游戏逻辑积木（如移动角色、播放动画）嵌套在「永久执行」积木内部，让逻辑代码被包裹在gameLoop的回调函数中。

方案2：使用setInterval #

如果不需要严格和浏览器帧率同步，也可以用setInterval实现异步循环，它会每隔指定时间执行一次回调：

// Blockly生成的代码示例
let loopInterval;

// 启动循环（间隔16ms≈60fps）
loopInterval = setInterval(() => {
  // 单帧游戏逻辑代码
  updateGameState();
  renderGame();
}, 16);

// 停止循环
function stopLoop() {
  clearInterval(loopInterval);
}

注意：setInterval的执行间隔存在误差，极端情况下可能出现回调堆积，游戏场景优先选择requestAnimationFrame。

关键注意点 #

• 每次回调仅处理单帧逻辑，绝对不能在回调内写入同步阻塞的代码（如嵌套无限循环）。
• 必须提供明确的循环停止机制，避免内存泄漏。
• Blockly代码生成时，要确保控制循环的标志位（loopRunning/loopInterval）处于全局或可被「停止」积木访问的作用域内。

内容的提问来源于stack exchange，提问作者c64-1541