JavaScript代码触发out of memory异常问题求助

你的代码触发内存溢出，核心原因是同步while循环会在30秒内疯狂、无限制调用display()：

• while是阻塞式循环，会霸占JS主线程，浏览器无法处理渲染、事件等其他任务
• 每次调用display()都会创建5个setTimeout定时器，30秒内会生成数百万个定时器实例，直接耗尽内存

因为你的display函数的完整动画周期是6秒（从显示第一个内容到清空所有用了6秒），所以我们可以基于这个周期，用异步循环来控制执行，既不会阻塞线程，也不会生成过量定时器。

方案一：使用setInterval控制循环 #

<script>
const TOTAL_RUN_TIME = 30000; // 总执行时长：30秒
const CYCLE_DURATION = 6000;  // 每轮动画周期：6秒
const startTime = Date.now();

// 每6秒执行一次display
const intervalId = setInterval(() => {
  display();
  // 检查是否达到总时长，到点停止循环
  if (Date.now() - startTime >= TOTAL_RUN_TIME) {
    clearInterval(intervalId);
    clearAllDiv();
  }
}, CYCLE_DURATION);

function display() {
  setTimeout(showLeft, 1000);
  setTimeout(showRight, 2000);
  setTimeout(showBLeft, 3000);
  setTimeout(showBRight, 4000);
  setTimeout(clearAllDiv, 6000);
}

function showLeft() {
  document.getElementById("left").innerHTML = "Hızlı";
}
function showRight() {
  document.getElementById("right").innerHTML = "Oku";
}
function showBLeft() {
  document.getElementById("bleft").innerHTML = "Çabuk";
}
function showBRight() {
  document.getElementById("bright").innerHTML = "Anla";
}
function clearAllDiv() {
  document.getElementById("left").innerHTML = " ";
  document.getElementById("right").innerHTML = " ";
  document.getElementById("bleft").innerHTML = " ";
  document.getElementById("bright").innerHTML = " ";
}
</script>

方案二：使用递归setTimeout控制循环 #

如果需要更灵活的周期控制（比如每轮结束后再判断是否继续），可以用递归方式：

<script>
const TOTAL_RUN_TIME = 30000;
const CYCLE_DURATION = 6000;
const startTime = Date.now();

function runNextCycle() {
  display();
  // 剩余时间足够的话，继续下一轮
  if (Date.now() - startTime < TOTAL_RUN_TIME) {
    setTimeout(runNextCycle, CYCLE_DURATION);
  } else {
    clearAllDiv();
  }
}

// 启动第一轮
runNextCycle();

// 以下函数与方案一完全一致
function display() {
  setTimeout(showLeft, 1000);
  setTimeout(showRight, 2000);
  setTimeout(showBLeft, 3000);
  setTimeout(showBRight, 4000);
  setTimeout(clearAllDiv, 6000);
}

function showLeft() {
  document.getElementById("left").innerHTML = "Hızlı";
}
function showRight() {
  document.getElementById("right").innerHTML = "Oku";
}
function showBLeft() {
  document.getElementById("bleft").innerHTML = "Çabuk";
}
function showBRight() {
  document.getElementById("bright").innerHTML = "Anla";
}
function clearAllDiv() {
  document.getElementById("left").innerHTML = " ";
  document.getElementById("right").innerHTML = " ";
  document.getElementById("bleft").innerHTML = " ";
  document.getElementById("bright").innerHTML = " ";
}
</script>

• 两种方案都是异步执行，不会阻塞浏览器主线程，页面可以正常响应其他操作
• 严格按照6秒周期执行display，30秒内刚好完成5轮完整动画，不会生成过量定时器
• 到总时长后自动停止，并清空所有内容

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