本文详解如何通过状态标志控制 treeview 加载图标的显示逻辑，确保 `fa-spinner` 仅在节点展开时出现、折叠时不显示，避免用户体验干扰。
在实现可交互的树形控件（TreeView）时，常需在异步加载或 DOM 动画过程中展示加载状态（如旋转的 fa-spinner）。但若不加区分地在每次点击都插入加载图标，就会导致折叠操作也触发加载动画——这不仅违背直觉，还可能造成视觉混乱和性能浪费。
核心问题在于：原始代码中，$(this).append("<div class='loading'>...") 被无条件执行，未判断当前是展开还是折叠动作。解决方案是引入一个局部作用域的状态标志（flag），精准追踪每个分支节点的展开/折叠状态。
✅ 正确实现方式：按节点独立维护展开状态
关键修改点如下（已整合进完整插件）：
- 在 tree.find('li').has("ul").each(...) 循环内部为每个 branch 声明 let flag = false;
- 点击时先翻转 flag：flag = !flag;
- 仅当 flag === true（即本次操作为展开）时才插入 loading 元素并延时移除
- 折叠时（flag === false）直接执行 slideToggle()，跳过加载逻辑
branch.on('click', function (e) {
if (this === e.target) {
flag = !flag; // 切换状态
const icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
if (flag) {
// ✅ 仅展开时显示加载图标
$(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'></span></div>");
setTimeout(() => {
$(this).find('.loading').remove();
$(this).children().children().slideToggle(400);
}, 400);
} else {
// ❌ 折叠时跳过加载，立即切换
$(this).children().children().slideToggle(400);
}
}
});⚠️ 注意事项：flag 必须声明在 .each() 回调内（而非插件顶层），否则所有节点共享同一变量，状态错乱；setTimeout 时间（400ms）应与 slideToggle 动画时长严格一致，确保加载图标在动画开始后、结束前移除；若后续需接入真实异步加载（如 AJAX），可将 setTimeout 替换为 Promise 链，并在数据返回后再移除 .loading 并展开内容。
? 扩展建议：更健壮的加载控制
若需进一步提升体验，可补充以下优化：
- 添加 CSS 过渡防止闪动：
.loading { opacity: 0; transition: opacity 0.15s; } .loading.show { opacity: 1; }并在 JS 中改为 $(this).append(...).find('.loading').addClass('show')；
- 使用 data-expanded 属性替代 flag，便于调试与 SSR 兼容；
- 对已加载过的节点缓存状态，避免重复插入/移除 DOM。
通过这种基于状态的精细化控制，TreeView 的交互反馈既准确又专业——用户能清晰感知“正在加载新内容”，而不会被无关的折叠动画干扰。
