Vanilla Js Ui Race Conditions Vrm Vs Live2d

代码解决方案

1. 应对懒加载 DOM 的绑定轮询（安全可靠）

`javascript const bindEvents = () => { // 兼容多个 ID 解析 const getEl = (ids) => { for (let id of ids) { const el = document.getElementById(id); if (el) return el; } return null; };

const targetEl = getEl(['live2d-agent-keyboard', 'vrm-agent-keyboard']);

// 如果没找到，自己建立一个 500ms 后的新宏任务来重试，然后 return 本次任务。
if (!targetEl) {
    setTimeout(bindEvents, 500);
    return;
}

// 找到了，顺次执行并结束，不会留下任何定时器垃圾
targetEl.addEventListener('change', myLogic);
myLogic(); // 手动触发第一次检查

};

setTimeout(bindEvents, 100); // 发动第一下 `

2. 多源状态判定降级（防止覆盖）

`javascript const checkState = () => { const isUiInteractive = domCheckbox && !domCheckbox.disabled; let isFeatureOn = false;

if (!isUiInteractive) {
    // UI 在转圈加载，信任乐观状态或后端缓存
    isFeatureOn = optimisticState !== undefined ? optimisticState : backendFlags;
} else {
    // UI 处于可用交互态，百分百信任当前 DOM
    isFeatureOn = optimisticState !== undefined ? optimisticState : domCheckbox.checked;
}

} `

关键经验

• 永远不要用硬编码的 setTimeout 时长来假定某个资源或 DOM 一定会加载完毕。
• 如果没有 React 这种 Virtual DOM 框架，手动处理跨组件通讯时要随时当心当前脚本运行时的真实 DOM 快照情况。