如何在 JavaScript 游戏循环中实现动态递减的定时延迟

花韻仙語 2026-01-08 00:00:00 次阅读

本文介绍如何使用 async/await + promise 封装 settimeout，构建一个每次执行间隔逐渐缩短的游戏循环，避免传统 while + settimeout 导致的同步阻塞与时间错乱问题。

在 JavaScript 中，直接用 while 循环配合 setTimeout 无法实现“逐轮延迟递减”的预期效果，根本原因在于：setTimeout 是异步非阻塞的，而 while 是同步立即执行的。你原代码中 while (i > 0) 会在几毫秒内一口气注册全部 10 个 setTimeout，它们虽然设置了不同延迟（如 5000ms, 4500ms, …），但全部同时开始计时，因此几乎在同一时刻（约 5 秒后）集中触发，造成“看似没变化”的假象。

✅ 正确解法是让每一轮等待严格串行、可中断、可控制。推荐使用 async/await 配合 Promise 化的 setTimeout：

// 将 setTimeout 封装为可 await 的 Promise
const timeout = (delay = 0) => new Promise(resolve => setTimeout(resolve, delay));

// 全局游戏状态对象（支持暂停/重启）
let game = null;

// 启动游戏循环
async function start() {
  console.log('? 游戏已启动');
  game = { running: true };

  let delay = 1000; // 初始延迟：1000ms

  while (delay > 100 && game.running) {
    await timeout(delay); // 等待当前延迟时间（暂停执行后续代码）

    if (!game.running) break;

    console.log(`✅ 执行事件，当前延迟：${delay}ms`);
    // ? 在此处插入你的游戏逻辑（如更新画面、检测碰撞等）
    // render(); update(); checkCollision();

    delay -= 100; // 每轮减少 100ms（可按需调整步长）
  }

  console.log('⏹️ 循环结束或已被停止');
}

// 停止游戏
function stop() {
  if (game) game.running = false;
}

// 重启（先停再启，确保状态干净）
function restart() {
  stop();
  start();
}