Javascript如何结合while循环与onclick函数实现点击方块后自动生成新方块

关于while循环方案的可行性 #

你提到的while循环搭配布尔值和onclick的方案不可行。
JavaScript运行在单线程环境下，所有页面渲染、用户事件响应都需要等待主线程空闲才能执行。如果启用while循环，会持续占用主线程资源，导致onclick事件完全无法触发，页面会直接进入卡顿无响应状态，无法实现你要的效果。

正确实现方案 #

你只需要把生成方块、重置计时的逻辑封装为独立的公共函数，每次点击方块后直接调用该函数刷新方块状态即可，不需要刷新页面。

完整修改后的代码： #

JS代码

const colours = ["red", "blue", "yellow", "green", "brown", "black", "purple", "orange"];
let starttime;

function createNewShape() {
  const shapeDom = document.getElementById('shape');
  // 恢复方块显示
  shapeDom.style.display = 'block';
  // 生成随机位置
  const topPos = Math.random() * 650;
  const leftPos = Math.random() * 650;
  shapeDom.style.top = topPos + 'px';
  shapeDom.style.left = leftPos + 'px';
  // 生成随机颜色
  shapeDom.style.backgroundColor = colours[Math.floor(Math.random() * colours.length)];
  // 重置计时起点
  starttime = new Date().getTime();
}

// 页面加载完成生成第一个方块
window.onload = createNewShape;

document.getElementById('shape').onclick = function() {
  // 计算本次点击耗时
  const endTime = new Date().getTime();
  const timeTaken = (endTime - starttime) / 1000;
  document.getElementById('timeTaken').innerHTML = timeTaken + ' seconds';
  // 直接生成下一个新方块
  createNewShape();
}

CSS代码（无修改）

#shape {
  width: 200px;
  height: 200px;
  position: relative;
}

HTML代码（无修改）

<p>Your time: <span id="timeTaken"></span></p>
<div id="shape"></div>

实现效果说明 #

点击当前方块后会立刻刷新出下一个随机位置、随机颜色的新方块，同时自动更新本次点击的耗时统计，全程不需要刷新页面。

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