定时器在页面最小化时不执行实现示例

实现在页面最小化时不执行定时器的方法可以通过两种方式来实现：一种是通过Page Visibility API，另一种是通过requestAnimationFrame()方法。

通过Page Visibility API

Page Visibility API可以检测当前页面是否可见，当页面被最小化或者切换到了其他标签页时，document.hidden属性会被设置为true。可以通过监听document的visibilitychange事件来在页面最小化时停止定时器的执行。

示例代码如下：

// 定义一个变量，用于标记定时器是否正在执行
var timerStarted = false;

function startTimer() {
  timerStarted = true;
  // 执行定时任务
  setInterval(function() {
    console.log('timer running');
  }, 1000);
}

// 监听document的visibilitychange事件
document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    // 如果页面最小化，则停止定时器
    clearInterval(timerStarted);
    timerStarted = false;
  } else if (!timerStarted) {
    // 如果页面重新变成可见状态且定时器未启动，则重新启动定时器
    startTimer();
  }
});

通过requestAnimationFrame()方法

requestAnimationFrame()方法可以代替setTimeout()方法来执行动画效果。它可以确保在每个页面重绘之前执行动画效果，避免了浪费系统资源的效果。

requestAnimationFrame()的回调函数会传递一个时间参数，用于计算动画的进度。通过在回调函数内部调用requestAnimationFrame()方法，可以实现在页面最小化时停止动画的效果。

示例代码如下：

// 定义一个变量，用于标记动画是否在执行中
var animationStarted = false;

function startAnimation() {
  animationStarted = true;
  var start = null;

  // 定义一个回调函数，用于计算动画进度
  function animate(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;

    // 执行动画效果
    console.log(progress);

    if (progress < 1000) {
      // 如果动画未执行完，则继续执行requestAnimationFrame
      requestAnimationFrame(animate);
    } else {
      // 如果动画已执行完，则重置状态变量
      animationStarted = false;
    }
  }

  // 执行第一次requestAnimationFrame
  requestAnimationFrame(animate);
}

function stopAnimation() {
  // 停止动画效果
  animationStarted = false;
}

// 监听document的visibilitychange事件
document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    // 如果页面最小化，则停止动画
    stopAnimation();
  } else if (!animationStarted) {
    // 如果页面重新变成可见状态且动画未执行，则重新启动动画
    startAnimation();
  }
});

以上就是实现在页面最小化时不执行定时器的两种方法，通过使用这些方法可以有效地提高页面的性能表现。