动态高亮重复触发的根本原因是监听逻辑未设“已触发”标记；应使用observer.unobserve()实现单次触发，或scroll中用布尔变量防重入，插入新内容后仅对新增节点执行一次高亮。
为什么动态高亮总在重复触发？
根本原因是监听逻辑没做「已触发」标记。比如用 IntersectionObserver 监听标题进入视口，或用 scroll 事件查位置，只要条件持续满足（如滚动停在某个区块），回调就会反复执行——高亮类反复加又加，视觉上像“闪一下”或“没反应”。这不是样式问题，是状态失控。
用 observer.unobserve() 实现单次触发
这是最干净、无副作用的解法：一旦目标元素被识别为“该高亮”，立刻停止监听它本身。适合滚动定位、首屏加载后激活等场景。
- 给每个要监听的元素（如
<h2 id="section-1"></h2>）单独创建IntersectionObserver实例，或用unobserve()主动移除 - 在回调里先加高亮类：
target.classList.add("is-active") - 紧接着调用：
observer.unobserve(target)—— 此后这个元素再也不会触发回调 - 别用
disconnect()全局停掉，否则其他元素也失效
scroll 事件中靠布尔标记防重入
当必须用 scroll（比如不支持 IntersectionObserver 的老环境），就靠一个闭包变量锁住状态：
let hasHighlighted = false;
window.addEventListener('scroll', () => {
if (hasHighlighted) return;
const el = document.querySelector('#target-section');
if (el && isElementInViewport(el)) {
el.classList.add('is-highlighted');
hasHighlighted = true;
}
});
注意：isElementInViewport() 要自己实现，别依赖 jQuery 的 :visible（它只看 display/visibility，不判断是否真在视口内）。
立即学习“前端免费学习笔记（深入）”；
动态插入内容后只高亮一次的坑
如果高亮逻辑绑在 DOMContentLoaded 或 load 上，但内容是后续用 innerHTML 或 appendChild() 插入的，那第一次不会生效。更糟的是：若你在插入后反复调用高亮函数，又没清空旧状态，就会叠加触发。
- 插入新节点后，只对这批节点运行一次高亮逻辑，不要全局扫全页
- 避免在循环里写
el.classList.add("highlight")而不检查是否已有该类 - 用
el.classList.toggle("highlight", shouldHighlight)比add+remove更安全，但前提是shouldHighlight是确定值，不是每次调用都算一遍
真正难的不是“怎么加高亮”，而是“怎么确保它只加一次且不再干扰后续逻辑”。很多 bug 表面是样式错乱，根子在状态变量没隔离、监听器没及时释放、或 DOM 查询范围过大。
