【elemen/js】阻塞UI线程导致的开关卡顿如何优化

芳草萋萋鹦鹉洲哦2025-11-28 22:52

如上图，关闭开关时由于我的方法中有报告生成过程，会阻塞UI线程，在导出完成之前，用户界面会完全冻结，造成卡顿感

javascript 复制代码

const handlePowerSwitch = async on => {
  consoleStore.runningInfo = { ...consoleStore.info };
  const res = await appStore.changePowerAction(on);
  // 若开关机失败 开关要复原
  if (!res.success) {
    appStore.power_action = !on;
  }
  // 单机版停止调度时记录仿真报告
  if (appStore.features === 'emulator' && !on) {
    if (window.exportSimulationReport) {
      window.exportSimulationReport();
    }
  }
  
};

为了防止界面卡顿，我们需要让导出操作异步执行，不阻塞主线程。使用 setTimeout 让出控制权：

javascript 复制代码

const handlePowerSwitch = async on => {
  consoleStore.runningInfo = { ...consoleStore.info };
  const res = await appStore.changePowerAction(on);
  // 若开关机失败 开关要复原
  if (!res.success) {
    appStore.power_action = !on;
  }
  // 单机版停止调度时记录仿真报告
  if (appStore.features === 'emulator' && !on) {
    if (window.exportSimulationReport) {
      setTimeout(() => {
        window.exportSimulationReport();
      }, 100);
    }
  }
  
};