使用While循环修改页面背景颜色遇到的问题

Hey there! Let's break down why your loop isn't updating the background color as expected, and how to fix it.

核心问题：同步循环阻塞了浏览器渲染 #

JavaScript运行在单主线程中，浏览器的渲染（比如更新页面背景色）也在这个线程里处理。你的代码遇到的问题是：

• 你的while循环是同步执行的，会完全阻塞主线程。哪怕你在prompt获取输入后立刻设置了document.body.style.backgroundColor = colour，浏览器也得等到整个循环结束后，才有机会去渲染这个变化。
• 每次关闭prompt弹窗后，循环会立刻进入下一次请求，浏览器始终没有空闲时间处理UI更新。只有当你输入空字符串退出循环时，最后一次的颜色修改才会被渲染出来（如果有的话）。

为什么移除循环后正常？ #

去掉循环的话，你输入颜色后，代码设置完背景色就执行完毕了。浏览器马上就能腾出时间处理渲染，所以你能立刻看到颜色变化。

修复方案：用异步方式替代同步循环 #

别再用阻塞线程的while循环了，改用setTimeout（递归调用）或setInterval这类异步模式，让浏览器在每次请求之间有时间渲染更新。这里有两种可行的实现方式：

1. 递归式setTimeout

这种方式能让浏览器在每次请求之间完成渲染：

function requestColor() {
  const colour = prompt("Give me a colour");
  
  // 输入空字符串时停止请求
  if (colour === "") {
    return;
  }
  
  // 更新背景色
  document.body.style.backgroundColor = colour;
  
  // 异步调度下一次请求
  setTimeout(requestColor, 0);
}

// 启动流程
requestColor();

2. 带清理的setInterval

你也可以用定时器循环请求，直到输入空字符串为止：

// 设置定时器
const colorInterval = setInterval(() => {
  const colour = prompt("Give me a colour");
  
  if (colour === "") {
    // 完成后清除定时器
    clearInterval(colorInterval);
    return;
  }
  
  document.body.style.backgroundColor = colour;
}, 0);

为什么这些异步方法有效？ #

setTimeout和setInterval会把回调函数放入浏览器的事件队列。当前代码执行完毕后，浏览器会先处理待执行的渲染任务，再运行回调函数。这样浏览器就能在请求下一次颜色之前，先把背景色的更新渲染出来。

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