JavaScript setInterval报错：仪表盘专家模式切换代码优化咨询

嘿，我来帮你搞定这个问题！你的代码功能正常但报错不断，核心是几个常见的JavaScript写法问题导致的，咱们一步步来优化：

先说说你的代码为啥会报错 #

1. 高频轮询+冗余逻辑：你用了两个setInterval每1ms执行一次，不仅极度消耗性能，而且两个定时器的逻辑是互斥的——当专家模式开启时，第二个定时器里找.col-sm-4元素会找不到，直接抛出Cannot read properties of null的错误；反之亦然。
2. 重复DOM查询：每次定时器触发都重新查询DOM元素，这是没必要的性能浪费。
3. 类名直接覆盖风险：直接赋值className会把元素原有的其他类（比如Bootstrap的间距类、自定义样式类）全部清空，可能引发其他样式问题。

资深开发者会这么写 #

我们用事件监听代替轮询，缓存DOM元素，安全操作类名，彻底解决报错问题：

// 1. 缓存DOM元素，只查询一次，避免重复开销
const expertCheckbox = document.getElementById("expertmodus");
const allBranchesCol = document.getElementById("allbranches")?.querySelector(".col-sm-6, .col-sm-4");
const mitteCol = document.getElementById("Mitte")?.querySelector(".col-sm-6, .col-sm-4");

// 2. 封装切换布局的逻辑函数
function updateExpertModeLayout(isEnabled) {
  // 先判断元素是否存在，避免空指针报错
  if (!allBranchesCol || !mitteCol) return;

  if (isEnabled) {
    // 用classList操作，保留其他类名
    allBranchesCol.classList.remove("col-sm-6");
    allBranchesCol.classList.add("col-sm-4");
    mitteCol.classList.remove("col-sm-6");
    mitteCol.classList.add("col-sm-4");
  } else {
    allBranchesCol.classList.remove("col-sm-4");
    allBranchesCol.classList.add("col-sm-6");
    mitteCol.classList.remove("col-sm-4");
    mitteCol.classList.add("col-sm-6");
  }
}

// 3. 页面加载时初始化一次，确保初始状态正确
if (expertCheckbox) {
  updateExpertModeLayout(expertCheckbox.checked);
  // 4. 监听复选框的change事件，只有状态变化时才执行逻辑
  expertCheckbox.addEventListener("change", function() {
    updateExpertModeLayout(this.checked);
  });
}

优化点说明 #

• 用事件监听代替轮询：只有用户勾选/取消复选框时才触发逻辑，性能提升N倍，再也不会有高频执行的冗余操作。
• 缓存DOM元素：页面加载时只查询一次元素，避免每次执行都遍历DOM树。
• 安全的类名操作：用classList.add/remove代替直接赋值className，保留元素原有的其他样式类，避免意外样式丢失。
• 空值判断：用可选链?.和if判断确保元素存在后再操作，彻底解决元素未加载或不存在时的报错。

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