JS循环动画切换浏览器标签仍运行，如何设置仅当前标签激活时运行

云原生阿岚

2026-9-29

解决方案

你可以通过浏览器原生的Page Visibility API实现动画仅在标签页可见时运行的效果，该API可以监听当前网站标签页是否处于用户激活可见的状态，我们基于状态启停动画和循环定时器即可解决问题。

核心改动逻辑

新增变量存储定时器ID、当前运行的动画实例、标签页可见状态，方便后续清理和状态判断
绑定visibilitychange事件：标签页切出时清空定时器、终止当前正在运行的动画；标签页切回时重新启动动画循环
原有循环逻辑中新增可见状态判断，不可见时不触发下一次循环

修改后完整JS代码

var loopTimer = null;
var currentAnim = null;
var isPageVisible = true;

// 监听标签页可见状态变化
document.addEventListener('visibilitychange', function() {
  isPageVisible = !document.hidden;
  if (isPageVisible) {
    // 切回当前标签页，重启动画循环
    loop1();
  } else {
    // 切出标签页，清空定时器+终止当前动画
    if (loopTimer) clearTimeout(loopTimer);
    if (currentAnim) currentAnim.cancel();
    // 重置元素透明度为初始状态，避免切回时显示异常
    document.getElementById("dollarAnim").style.opacity = '0';
  }
});

function loop1() {
  // 页面不可见时直接终止，不触发下一次循环
  if (!isPageVisible) return;

  loopTimer = setTimeout(function () {
    // 存储动画实例，方便后续终止
    currentAnim = document.getElementById("dollarAnim").animate([
      { opacity: "0" },
      { opacity: "1" },
      { opacity: "0" },
    ], {
      duration: 10000,
      iterations: 1,
    });
    loop1();
  }, 20000)
}

loop1();

HTML代码不需要做任何修改，可直接复用你原有代码。