在 swiper 启用 `freemode` 时，原生事件（如 `settranslate`）无法覆盖整个拖拽-滑动-惯性停止全过程；本文提供基于定时器的高精度实时响应方案，确保 `setimagepositions()` 在用户按住拖动、手指松开后的惯性滚动及最终静止前持续执行。
Swiper 的 freeMode: true 模式下，滑块行为由物理引擎模拟（如速度衰减、惯性滚动），但 Swiper 不提供 onDragStart → onDragEnd 或 onFreeMoveUpdate 这类连续触发的生命周期事件。因此，仅监听 setTranslate（仅在 translate 值变更时触发）会导致动画卡顿或中断——尤其在惯性滑动阶段，setTranslate 可能长时间不触发，而视觉效果却需持续更新。
✅ 正确解法：主动轮询 + 精准终止机制
我们通过 setInterval 高频调用 setImagePositions()，并在检测到滑动真正静止后自动清理定时器。关键在于：
- 每次 setTranslate 触发时重置并启动新定时器（避免多个定时器叠加）；
- 设置合理超时阈值（如 maxLoop = 300 次 × 10ms ≈ 3s），覆盖最长惯性滚动时间；
- 高频刷新保障流畅性（10ms ≈ 100fps，远超人眼感知阈值）；
- 手动清理避免内存泄漏（clearInterval + freeMoveInterval = null）。
以下是优化后的核心代码（已适配 Swiper 9+ 与 jQuery）：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
let parallaxAmount = 49;
let verticalAmount = 60;
let rotationAmount = 6;
// 全局定时器引用，用于动态管理
let freeMoveInterval = null;
const swiper = new Swiper('.swiper', {
slidesPerView: 4,
centeredSlides: true,
spaceBetween: 20,
freeMode: { enabled: true },
});
function setImagePositions() {
$('.swiper-slide').each(function () {
const $slide = $(this);
const $inner = $slide.find('.swiper-slider-inner');
// 计算元素相对于 Swiper 容器中心的归一化进度（-1 ~ 1）
const slideCenter = $slide.offset().left + $slide.width() / 2;
const containerCenter = $('.swiper').offset().left + $('.swiper').width() / 2;
const progressCenter = (slideCenter - containerCenter) / ($('.swiper').width() + $slide.width());
// 应用视差变换：垂直位移 + 旋转（支持负值，无需取反）
$inner.css(
'transform',
`translateY(${verticalAmount * progressCenter}%) rotate(${rotationAmount * progressCenter}deg)`
);
});
}
// ✅ 关键：在 setTranslate 事件中启动/重置轮询
swiper.on('setTranslate', () => {
// 清理上一个定时器（防重复启动）
if (freeMoveInterval) {
clearInterval(freeMoveInterval);
}
let loopCount = 0;
const maxLoops = 300; // 覆盖典型惯性滚动时长（3秒内）
freeMoveInterval = setInterval(() => {
if (loopCount++ >= maxLoops) {
clearInterval(freeMoveInterval);
freeMoveInterval = null;
return;
}
setImagePositions();
}, 10); // 10ms 刷新间隔 → 平滑动画基础
});
// 页面加载后立即初始化一次位置
setImagePositions();⚠️ 注意事项与最佳实践：
- 性能权衡：10ms 间隔对现代设备足够流畅，若目标设备性能受限，可放宽至 16ms（≈60fps），但需同步增加 maxLoops 以保证覆盖时长。
- 避免重复绑定：务必在 setTranslate 回调内先 clearInterval，否则快速连续拖拽会创建多个定时器，导致 CPU 占用飙升。
- 兼容性提示：此方案适用于所有 Swiper 版本（v6+），且不依赖 observer: true 或 watchSlidesProgress（后者在 freeMode 下不可靠）。
- 进阶优化：如需更高精度，可结合 swiper.touches 或 swiper.velocity（需 Swiper 10+）做动态终止判断，但定时器方案已满足 99% 场景需求。
通过该方案，setImagePositions() 将在用户手指按下→拖动→松开→惯性滚动→完全静止的全生命周期中持续执行，实现真正无缝的视差与动态变换效果。
