Power BI Embedded中特定视觉slicerState变化触发主题切换的死循环问题

report.applyTheme() 执行后会触发报告全局重绘，继而再次触发你绑定的 rendered 事件，在没有状态变更校验的情况下，逻辑会反复执行「读取slicer状态→更新主题→触发重绘→读取slicer状态」的流程，形成无限循环。
你选择通过监听slicerState变化判断切换控件触发的方案是可行的，自定义视觉确实无法直接监听原生的buttonClick或dataSelection事件。

• 新增两个全局变量，分别存储上一次toggle的状态值、主题应用中的锁标识，避免重复执行更新逻辑
• 每次rendered事件触发时，先判断是否正在执行主题更新，如果是直接终止后续逻辑
• 读取当前toggle值后和上一次存储的值做对比，仅当值发生变更时才执行主题更新
• 主题更新异步完成后，更新存储的上一次toggle值，同时释放锁

// Get a reference to the embedded dashboard HTML element
var $embedContainer = $("#embedContainer");
// 新增全局变量：存储上一次toggle的状态，初始值对应默认OFF
let lastToggleValue = "OFF";
// 新增全局变量：主题应用锁，防止更新主题时触发的重绘重复执行逻辑
let isApplyingTheme = false;

// 主题配置保持不变
var themes = [
  {
    "name": "light",
    "dataColors": ["#93A299", "#CF543F", "#B5AE53", "#848058", "#E8B54D", "#786C71", "#93A2A0", "#CF9A3F", "#8CB553", "#728458", "#D0E84D", "#786D6C"],
    "background": "#FFFFFF",
    "foreground": "#CF543F",
    "tableAccent": "#93A299"
  },
  {
    "name": "dark",
    "dataColors": ["#31B6FD", "#4584D3", "#5BD078", "#A5D028", "#F5C040", "#05E0DB", "#3153FD", "#4C45D3", "#5BD0B0", "#54D028", "#D0F540", "#057BE0"],
    "background": "#000000",
    "foreground": "#4584D3",
    "tableAccent": "#31B6FD"
  }
]

//define report embed
var report = powerbi.embed($embedContainer.get(0), config);

//when report renders
report.on('rendered', async () => {
  // 如果正在应用主题，直接跳过后续逻辑
  if (isApplyingTheme) return;
  
  //get all pages
  const pages = await report.getPages()
  //get active page
  let activePage = pages.filter(function(page) {
    return page.isActive
  })[0];
  //get visuals on active page
  let visuals = await activePage.getVisuals();
  //find target visual
  const TargetVisual = visuals.filter(function(visual) {
    return visual.name === "259fea6751434e7910b4" 
  })[0];
  //get current state of visual 
  const state = await TargetVisual.getSlicerState();
  //get current state value (on or off )
  let filteredValue = state.filters[0].values;
  // 兼容值为数组的情况，部分slicer返回的values是数组格式
  if (Array.isArray(filteredValue)) {
    filteredValue = filteredValue[0];
  }
  
  // 和上一次存储的状态对比，没有变化就不执行更新
  if (filteredValue === lastToggleValue) return;
  
  // 上锁，防止后续重绘触发重复逻辑
  isApplyingTheme = true;
  try {
    if (filteredValue == "ON") {
      // toggle为ON时应用深色主题
      await report.applyTheme({
        themeJson: themes.find(theme => theme.name === "dark")
      });
    } else {
      // toggle为OFF时应用浅色主题
      await report.applyTheme({
        themeJson: themes.find(theme => theme.name === "light")
      });
    }
    // 更新上一次存储的状态值
    lastToggleValue = filteredValue;
  } catch (err) {
    console.error("主题更新失败", err);
  } finally {
    // 无论成功失败都释放锁
    isApplyingTheme = false;
  }
});

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