Velocity.js动画在浏览器标签失活时异常，setInterval序列动画添第三元素故障

我太懂这种坑了！你遇到的问题本质是浏览器后台对定时器的节流优化：当标签页处于后台时，浏览器会降低setInterval的执行频率（比如从原本的几十ms变成几百ms甚至更久），而多个元素的动画如果各自依赖独立的setInterval，或者基于定时器执行次数来计算状态，后台期间累积的时序偏差，在切回标签页后就会彻底打乱动画同步性——元素越多，偏差越明显。

给你两个靠谱的解决方案：

方案1：用requestAnimationFrame替代setInterval（推荐） #

requestAnimationFrame（简称RAF）是浏览器专门为动画设计的API，它会和屏幕刷新率同步执行，而且在标签页后台时会自动暂停动画。切回页面后，它会从正确的状态继续，完全避免时序混乱。

举个适配你场景的改造示例：

// 先把每个球的动画配置统一管理
const ballConfigs = [
  { $el: $('.ball--1'), blinkDuration: 100, blinkDelay: 50, isVisible: true, lastToggleTime: Date.now() },
  { $el: $('.ball--2'), blinkDuration: 100, blinkDelay: 50, isVisible: true, lastToggleTime: Date.now() },
  { $el: $('.ball--3'), blinkDuration: 100, blinkDelay: 50, isVisible: true, lastToggleTime: Date.now() }
];

function updateBlinks() {
  const now = Date.now();
  
  ballConfigs.forEach(config => {
    // 计算距离上次切换状态过去了多久
    const elapsed = now - config.lastToggleTime;
    // 判断是否该切换状态：显示时持续duration，隐藏时持续delay
    const shouldToggle = elapsed >= (config.isVisible ? config.blinkDuration : config.blinkDelay);
    
    if (shouldToggle) {
      config.isVisible = !config.isVisible;
      config.$el.toggleClass('visible', config.isVisible); // 假设你用visible类控制显示
      config.lastToggleTime = now; // 更新切换时间为当前时间
    }
  });
  
  // 持续调用，保持动画运行
  requestAnimationFrame(updateBlinks);
}

// 启动动画
requestAnimationFrame(updateBlinks);

这个方案的核心是基于真实时间戳判断状态切换，而不是依赖定时器的执行次数，所以不管后台暂停多久，切回来后每个球都会按照实际流逝的时间计算是否该切换，完全不会乱。

方案2：如果必须用setInterval，基于时间戳修正偏差 #

如果你因为某些原因不能换RAF，那一定要放弃“靠执行次数算状态”的思路，改用真实时间戳来计算每个元素的状态：

let lastUpdateTime = Date.now();
const ballConfigs = [
  { $el: $('.ball--1'), blinkDuration: 100, blinkDelay: 50, isVisible: true, elapsedSinceToggle: 0 },
  { $el: $('.ball--2'), blinkDuration: 100, blinkDelay: 50, isVisible: true, elapsedSinceToggle: 0 },
  { $el: $('.ball--3'), blinkDuration: 100, blinkDelay: 50, isVisible: true, elapsedSinceToggle: 0 }
];

setInterval(() => {
  const now = Date.now();
  const elapsedSinceLastUpdate = now - lastUpdateTime;
  
  ballConfigs.forEach(config => {
    config.elapsedSinceToggle += elapsedSinceLastUpdate;
    const requiredTime = config.isVisible ? config.blinkDuration : config.blinkDelay;
    
    // 如果累积时间超过了需要的时长，就切换状态，并且把多余的时间留到下一轮（避免跳帧）
    while (config.elapsedSinceToggle >= requiredTime) {
      config.isVisible = !config.isVisible;
      config.$el.toggleClass('visible', config.isVisible);
      config.elapsedSinceToggle -= requiredTime;
    }
  });
  
  lastUpdateTime = now;
}, 16); // 接近60fps的间隔

这个写法会把每次定时器执行时真实流逝的时间加到每个元素的计时里，即使定时器被节流，也能准确累积时间，保证状态切换的时机正确。

总结一下 #

本质问题就是setInterval的执行间隔不可靠，后台时浏览器会“偷懒”拉长间隔，导致多个元素的动画时序错位。用RAF或者基于真实时间戳的计算，就能让动画状态和实际时间绑定，彻底解决切换标签页后的混乱问题。

内容的提问来源于stack exchange，提问作者forethought