For循环未逐个处理div，随机隐藏方块功能异常求助

你的代码核心问题是循环逻辑混乱导致一次处理多个方块，同时冗余的判断逻辑也引发了隐藏行为异常，具体问题点：

• for循环里直接修改循环变量i，把随机数赋值给i彻底打乱了遍历逻辑，每次执行disappearingBoxes都会跑完整循环次数，一次隐藏多个方块
• 用toFixed()把随机数转成字符串，和id比较时容易出现类型匹配问题
• 移除id后再判断id是否为null的逻辑完全冗余，还可能引入额外错误
• 没有处理所有方块隐藏后的停止逻辑，定时器会一直无效执行

修复后的代码 #

// 保存定时器ID，方便后续自动停止
let fadeTimer = setInterval(disappearingBoxes, 500);

function disappearingBoxes() {
  // 筛选出所有未被隐藏的方块
  const visibleBoxes = Array.from(boxes.children).filter(box => !box.classList.contains('hidden'));
  
  // 没有可见方块时，停止定时器
  if (visibleBoxes.length === 0) {
    clearInterval(fadeTimer);
    return;
  }
  
  // 随机选中一个可见方块
  const randomIndex = Math.floor(Math.random() * visibleBoxes.length);
  const targetBox = visibleBoxes[randomIndex];
  
  // 添加隐藏类
  targetBox.classList.add('hidden');
}

代码说明 #

• 每次执行只处理一个随机方块，完全符合逐个隐藏的需求
• 先筛选可见方块，避免重复操作已隐藏的元素
• 所有方块隐藏后自动停止定时器，避免无效执行
• 去掉冗余的id判断逻辑，直接通过类控制显示隐藏，逻辑更简洁清晰

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