本文详解如何在 event.title 动态更新时，立即中断当前 jquery 动画、重新测量文本宽度，并基于新内容无缝重启滚动动画，避免卡顿、错位或状态残留。
本文详解如何在 event.title 动态更新时，立即中断当前 jquery 动画、重新测量文本宽度，并基于新内容无缝重启滚动动画，避免卡顿、错位或状态残留。
在实现滚动字幕（如音乐播放器标题跑马灯）时，一个常见但易被忽视的关键需求是：当显示文本实时变更（例如切换歌曲名），正在运行的动画必须被精确终止，并以新文本的尺寸和内容立即重建动画流程。原始代码使用 .animate() 配合递归调用，但未处理动画状态清理，导致旧动画残留、textWidth 缓存失效、副本元素未同步更新等问题。
✅ 正确做法：三步重置机制
主动终止进行中的动画与定时器
使用 $(element).stop(true, true) 清除动画队列并跳转至最终状态；若使用 setInterval 或 requestAnimationFrame，需配合全局变量（如 animationFrame 或 animationInterval）进行显式清除。动态重计算关键参数
每次 event.title 更新后，必须重新获取 testText.outerWidth() 和 $('#line2').width()，不可复用旧值——因为字体渲染、缩放、容器尺寸均可能变化。安全重建动画上下文
删除旧副本元素（.test-text-copy），重新插入并赋值；避免 DOM 节点堆积或引用失效。
以下为推荐的生产级实现（基于 requestAnimationFrame，兼顾性能与可控性）：
var testText = $('.test-text');
var animationFrame = null;
var animationStartTime = null;
var animationDuration = 3000; // 单次滚动耗时（ms）
var animationDelay = 1000; // 滚动前静止时间（ms）
function wallpaperMediaPropertiesListener(event) {
// 清理上一次动画
if (animationFrame) {
cancelAnimationFrame(animationFrame);
animationFrame = null;
}
if (animationStartTime) animationStartTime = null;
// 更新文本内容
if (!event.title) {
testText.text('\u200B'); // 插入零宽空格，保留占位
return;
}
testText.text(event.title);
const containerWidth = $('#line2').width();
const textWidth = testText.outerWidth();
const gapSize = 30;
// 判断是否需要滚动：仅当文本溢出容器
if (textWidth <= containerWidth) {
testText.css('margin-left', 0);
$('.test-text-copy').remove(); // 清理残留副本
return;
}
// 移除旧副本，创建新副本
$('.test-text-copy').remove();
const testTextCopy = $('<div></div>')
.addClass('test-text-copy')
.css({ 'margin-left': gapSize })
.insertAfter(testText)
.text(event.title);
// 启动平滑动画循环
function animate(timestamp) {
if (!animationStartTime) animationStartTime = timestamp;
const elapsed = timestamp - animationStartTime;
const progress = Math.min(elapsed / animationDuration, 1);
const marginLeft = -(progress * (textWidth + gapSize));
testText.css('margin-left', marginLeft);
if (progress < 1) {
animationFrame = requestAnimationFrame(animate);
} else {
// 重置位置，延迟后重启
testText.css('margin-left', 0);
animationStartTime = null;
setTimeout(() => {
if (testText.text() === event.title) { // 确保文本未被覆盖
animationFrame = requestAnimationFrame(animate);
}
}, animationDelay);
}
}
// 延迟启动（模拟 pause → start 效果）
setTimeout(() => {
if (testText.text() === event.title) {
animationFrame = requestAnimationFrame(animate);
}
}, animationDelay);
}
window.wallpaperRegisterMediaPropertiesListener(wallpaperMediaPropertiesListener);⚠️ 关键注意事项
- 不要依赖闭包变量缓存尺寸：textWidth 必须在每次 event.title 更新后即时重读，否则动画位移将基于过期宽度，造成滚动不完整或越界。
- 副本元素需严格管理：每次新文本都应 .remove() 旧 .test-text-copy，防止 DOM 泄漏与样式冲突。
- requestAnimationFrame 优于 setInterval：前者与屏幕刷新率同步，动画更流畅；且 cancelAnimationFrame 可精准终止，无竞态风险。
- 防抖非必需，但需防御性判断：在 complete 回调或 setTimeout 中检查 testText.text() 是否仍为当前 event.title，避免因监听器多次触发导致动画错乱。
通过以上方案，无论 event.title 每秒更新 1 次还是 10 次，动画都能即时响应、干净重启，确保视觉表现始终与最新文本严格一致。
