本文解决在歌曲标题变更过程中，因闭包捕获旧 DOM 尺寸而导致滚动动画错乱的问题，核心是消除 event 对象的闭包引用，改用即时传入的字符串参数确保每次动画基于最新渲染尺寸计算。
本文解决在歌曲标题变更过程中，因闭包捕获旧 dom 尺寸而导致滚动动画错乱的问题，核心是消除 `event` 对象的闭包引用，改用即时传入的字符串参数确保每次动画基于最新渲染尺寸计算。
在实现歌词或标题滚动动画时，一个常见陷阱是：当新标题快速切换（如切歌）而前一次动画尚未启动（仍处于 3 秒延迟中），setTimeout 回调内部仍引用着上一次执行时的 testWidth 和 event.title —— 这些值来自闭包，不会随 DOM 实时更新，导致动画使用错误宽度、偏移量错位，甚至在不满足条件（testWidth ≤ #line1.width()）时仍强行触发。
根本原因在于闭包变量的“静态快照”特性：原始代码中，wallpaperMediaPropertiesListener(event) 的整个函数体在调用时形成闭包，其中 testWidth = test.outerWidth() 的结果被固化，后续所有 shiftingAnimation 递归调用都复用该值，即使 test.text(event.title) 已更新，DOM 重排尚未完成或未被重新测量。
✅ 正确解法：剥离事件对象依赖，只传递纯净数据
将函数签名改为接收 title 字符串而非 event 对象，并在调用处显式传入最新标题：
// 调用方（例如事件监听器中）
wallpaperMediaPropertiesListener(currentSong.title);
// 函数定义
function wallpaperMediaPropertiesListener(title) {
// 1. 立即重置状态
test.stop(true).css('margin-left', 0);
// 2. 更新文本并强制同步获取最新尺寸
test.text(title);
// ⚠️ 关键：触发重排以确保 outerWidth 返回当前渲染值
test[0].offsetHeight; // 强制 layout flush
const testWidth = test.outerWidth();
const lineWidth = $('#line1').width();
// 3. 清理旧副本
$('.test-copy').remove();
// 4. 仅当超长时才克隆 & 启动动画
if (testWidth > lineWidth) {
test.clone()
.css({ 'margin-left': gap, 'font-size': '1.05vh' })
.removeClass().addClass('test-copy')
.insertAfter(test);
// 5. 定义动画逻辑（注意：不再依赖外部闭包变量）
function shiftingAnimation() {
setTimeout(() => {
test.animate({
'margin-left': -(testWidth + gap)
}, {
duration: Math.abs((testWidth + gap) * 100 / 5), // speed=5
easing: 'linear',
complete: () => {
test.css('margin-left', 0);
shiftingAnimation(); // 递归启动下一轮
}
});
}, 3000);
}
// 首次延迟启动
setTimeout(shiftingAnimation, 3000);
}
}
? 关键改进点说明：
- 参数纯净化：title 是不可变字符串，避免 event 对象引发的隐式引用和内存泄漏风险；
- DOM 同步测量：通过 test[0].offsetHeight 触发浏览器立即重排（reflow），确保 outerWidth() 获取的是更新文本后的实际宽度；
- 条件前置校验：动画启动逻辑完全包裹在 if (testWidth > lineWidth) 内，杜绝“假性超长”导致的无效动画；
- 无全局 timer 管理：递归 setTimeout 替代 setInterval，每次启动前均重新计算尺寸，天然具备响应式；
? 额外建议：
- 若动画频繁触发，可增加防抖机制（如 clearTimeout(pendingTimer)）避免多层嵌套定时器堆积；
- 使用 CSS @keyframes + transform 替代 jQuery .animate() 可获得更高性能与更精准控制；
- 对 gap、speed 等常量建议提取为配置项，提升可维护性。
遵循此方案，动画将严格基于每次标题更新后的实时 DOM 尺寸运行，彻底规避因闭包变量陈旧导致的视觉错乱问题。
