JavaScript循环调用API致浏览器崩溃问题求助

你的代码点击button-two后浏览器崩溃，核心问题有两个：

• 同步阻塞的sleep函数：你写的sleep是用同步循环实现的，会完全卡住浏览器的主线程——JavaScript是单线程模型，主线程被阻塞时，浏览器没法处理渲染、用户交互等任何任务，直接导致页面无响应甚至崩溃。
• 无限同步死循环：do-while循环里active始终为true，没有终止条件，加上同步sleep，循环会一直不间断地执行，疯狂发送请求，进一步加重主线程负担。

用浏览器提供的**异步定时器setInterval**来实现定时请求，它不会阻塞主线程，能让浏览器正常处理其他任务。同时加上停止定时器的逻辑，避免无法终止的问题：

"use strict";

// 生成单个随机项
document.querySelector(".button-one").addEventListener("click", function () {
  const request = new XMLHttpRequest();
  request.open("GET", "http://127.0.0.1:8000/get_random/");
  request.send();

  request.addEventListener("load", function () {
    console.log(this.responseText);
    document.querySelector(".display-box-one").textContent = this.responseText;
  });
});

// 定时生成随机项（带停止逻辑）
let intervalId = null; // 存储定时器ID，用于停止

document.querySelector(".button-two").addEventListener("click", function () {
  // 如果已经有定时器在运行，先清除避免重复
  if (intervalId) {
    clearInterval(intervalId);
  }

  // 每2秒执行一次请求
  intervalId = setInterval(() => {
    const request = new XMLHttpRequest();
    request.open("GET", "http://127.0.0.1:8000/get_random/");
    request.send();

    request.addEventListener("load", function () {
      const returnedRandom = this.responseText;
      document.querySelector(".display-box-one").textContent = returnedRandom;
      console.log(returnedRandom);
    });
  }, 2000);
});

// 可选：添加停止按钮的逻辑
// document.querySelector(".button-stop").addEventListener("click", function () {
//   if (intervalId) {
//     clearInterval(intervalId);
//     intervalId = null;
//     console.log("已停止自动生成");
//   }
// });

• 可以用fetch API替代XMLHttpRequest，代码更简洁现代：

// 替换setInterval里的请求部分
fetch("http://127.0.0.1:8000/get_random/")
  .then(response => response.text())
  .then(data => {
    document.querySelector(".display-box-one").textContent = data;
    console.log(data);
  })
  .catch(err => console.error("请求失败:", err));

• 给请求添加error事件监听，处理请求失败的情况，避免错误被忽略。

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