如何在JavaScript中实现带等待的永久循环？无限克隆元素遇阻

原代码无法运行的核心问题有两个：

1. 同步while(true)死循环阻塞主线程：sleep(2000).then(...)是异步操作，但同步循环会一直占用浏览器主线程，导致异步回调永远没有执行机会，直接卡死浏览器。
2. 语法错误：代码末尾有多余的.，会导致JS解析失败。

修复方案一：用async/await实现可等待的循环 #

这种方式更符合同步逻辑思维，代码可读性更高：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function spawnBullets() {
  // 提前获取原元素，避免每次克隆重复查询DOM
  const originalBullet = document.getElementById("bullet");
  if (!originalBullet) return; // 原元素不存在时直接退出，避免报错

  while (true) {
    await sleep(2000); // 等待2秒后再执行克隆

    // 克隆并添加元素到页面
    const clonedBullet = originalBullet.cloneNode(true);
    document.body.appendChild(clonedBullet);

    // 设置初始位置
    clonedBullet.style.top = `${Math.floor(Math.random() * (450 - 250 + 1)) + 250}px`;
    clonedBullet.style.left = "0px";

    // 启动元素移动逻辑
    const moveInterval = setInterval(() => {
      const rect = clonedBullet.getBoundingClientRect();
      if (rect.right >= window.innerWidth) {
        clearInterval(moveInterval);
        document.body.removeChild(clonedBullet);
      } else {
        clonedBullet.style.left = `${rect.left + 1}px`;
      }
    }, 5);
  }
}

// 启动克隆循环
spawnBullets();

修复方案二：用递归调用实现无限循环 #

如果不想使用async/await，可以通过递归+setTimeout实现同样的效果：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function spawnBullet() {
  const originalBullet = document.getElementById("bullet");
  if (!originalBullet) return;

  // 克隆并设置初始位置
  const clonedBullet = originalBullet.cloneNode(true);
  document.body.appendChild(clonedBullet);
  clonedBullet.style.top = `${Math.floor(Math.random() * (450 - 250 + 1)) + 250}px`;
  clonedBullet.style.left = "0px";

  // 移动元素
  const moveInterval = setInterval(() => {
    const rect = clonedBullet.getBoundingClientRect();
    if (rect.right >= window.innerWidth) {
      clearInterval(moveInterval);
      document.body.removeChild(clonedBullet);
    } else {
      clonedBullet.style.left = `${rect.left + 1}px`;
    }
  }, 5);

  // 延迟2秒后递归调用自身，实现无限克隆
  setTimeout(spawnBullet, 2000);
}

// 启动克隆逻辑
spawnBullet();

关键优化点 #

• 提前获取原元素#bullet，减少重复DOM查询的性能消耗。
• 增加原元素存在性判断，避免DOM中没有目标元素时抛出错误。
• 用模板字符串拼接样式值，避免字符串拼接错误。

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