jQuery 类名、DOM 生命周期与动画队列：修复重复触发

旧练习中的开关灯、链式样式、产品切换、动画、节点创建删除和弹幕，本质上都在管理 DOM 状态。可靠做法是让状态可重复执行、事件有清理边界、动态节点安全创建，并为动画定义取消和结束语义。

用 class 描述状态，不把颜色写进事件

.addClass()、.removeClass()、.hasClass() 和 .toggleClass() 可管理展示状态。对于登录态、菜单展开或请求中等业务状态，优先使用明确的 add/remove，而不是在重复触发时依赖 toggle 猜测当前值。CSS 集中管理颜色、布局和焦点样式，JavaScript 只表达状态变化。

const $panel = $('#details');
const $toggle = $('#details-toggle');

$toggle.on('click.details', () => {
  const expanded = $toggle.attr('aria-expanded') === 'true';
  $toggle.attr('aria-expanded', String(!expanded));
  $panel.prop('hidden', expanded);
  $toggle.toggleClass('is-open', !expanded);
});

同一组件重复挂载时先拆除命名空间内的旧处理器，再绑定新实例；销毁时调用 .off('.details')。不要用 .off() 无参数清空元素上其他模块的监听器。多个不同功能应使用不同事件命名空间。

创建和删除节点要考虑数据与安全

用 .append() 插入节点、.empty() 清空子节点、.remove() 删除节点。jQuery 的 .remove() 会清理关联的数据和处理器；.detach() 适合暂时移走并准备复用的节点。用字符串拼 HTML 时，外部文本可能变成可执行标记；用户输入应通过 .text() 写入，结构用 document.createElement() 或 jQuery 节点构造。

function addNotice(message) {
  const item = $('<li>', { class: 'notice-item' }).text(message);
  $('#notice-list').append(item);
}

清理异步更新也属于节点生命周期：组件卸载后取消计时器、观察器和仍可取消的请求，或检查实例仍然有效后再更新 DOM。

理解 animate 的队列和 stop 参数

.animate() 默认把效果放入 fx 队列；鼠标快速进入/离开或重复点击会堆起许多过时动画。.stop() 可以停止当前动画，stop(true, true) 会清队列并跳到当前目标值，.finish() 会把队列中的动画也推进到各自终点。选择哪种行为必须符合产品状态，不能在所有情况下照抄同一组参数。

function openPanel($panel) {
  $panel.stop(true, true).slideDown(160);
}

function closePanel($panel) {
  $panel.stop(true, true).slideUp(160);
}

如果动画只是颜色、位移或展开状态，优先用 CSS transition/class，减少 JavaScript 每帧工作。遵守 prefers-reduced-motion，给用户提供关闭自动滚动/弹幕的方式；动效不能成为状态被理解的唯一渠道。

链式调用和断链

多数 jQuery setter 返回原集合，因此 .addClass().attr().show() 可以链式调用。getter 常返回值而不是集合，链在这里结束；.find() 会创建新集合，必要时 .end() 返回前一集合。链式代码不要长到看不清每一步作用的对象，遇到条件、异步和副作用时拆成有名字的变量。

1. 初始化、重复初始化和销毁分别测试一次，确认事件没有倍增。
2. 用户内容进入列表时测试 <script>、引号和标签文本只作为文本显示。
3. 快速连续触发动画，观察最终状态、队列清理和焦点是否一致。
4. 在减少动态效果系统设置下检查滚动、轮播、动画和弹幕。

参考：jQuery animate、jQuery stop、jQuery finish、jQuery off、jQuery detach、MDN prefers-reduced-motion、OWASP DOM XSS Prevention。