JS-使用定时器时要注意的细节

假设页面上要显示一个计数器功能，每隔1秒钟，计数器就加1。

一、基础版的定时器

先完成一个简单版，实现最基础的功能。

代码如下：

启动
停止
计数器：0

这样，点击启动按钮后，计数器开始计数；点击停止按钮后，计数器停止计数。 timer 是一个数字，保存着定时器的编号。

效果如下：

二、解决生成多个定时器的问题

上面的代码虽然能够工作，但是有个很大的问题：当在启动按钮上连续多次点击后，会生成多个定时器，每个定时器都会在1秒后更新计数器的内容，这就导致计数器不准确。

效果如下：

这个问题产生的原因是：在点击启动按钮时，没有判断是否已经有定时器在执行。

解决此问题的方案是：

1. 在点击启动按钮时，判断是否已经有定时器在执行，如果已有就返回，没有就创建一个新的定时器。

// 启动定时器......
function startTimer() {
  // 判断是否已经有定时器在执行，如果已有就返回
  if (timer) {
    return
  }

  // 没有就创建一个新的定时器
  timer = setInterval(function () {
    count++

    spanEl.textContent = count
  }, 1000)
}

2. 在点击停止按钮时，一定要将 timer 设置为 null ，因为 clearInterval() 函数只负责清除此timer编号的定时器，但是不会处理此编号。

// ......停止定时器
function stopTimer() {
  // 判断是否已经有定时器在执行，如果没有就返回
  if (!timer) {
    return
  }

  // 清除已有的定时器（只清除此timer编号的定时器，但是不会处理此编号）
  clearInterval(timer)

  // 清除定时器的编号，便于启动定时器时判断
  timer = null
}

完整代码如下：

启动
停止
计数器：0

效果如下：

三、增强功能：离开页面后，定时器停止，返回后继续运行

有时会有这样的需求：当离开页面后，定时器就自动停止，间隔一段时间返回页面，此定时器又自动继续运行。

举个例子：比如在一个轮播图场景下，每隔5秒轮播一张图片，当我们离开此页面，去浏览另一个页面时，图片轮播就停止了，当我们再次返回此页面时，图片从离开时的那张开始继续轮播。就好像它在等待我们回来一样，而不是傻乎乎地自己在那儿不停地轮播。

要实现这样的功能，需要用到以下的知识点：

1. 用 document 对象的 visibilityState 属性判断页面可见性的状态；
2. 用 document 对象的 onvisibilitychange() 方法，它可以监听到页面可见性的改变；

document.onvisibilitychange = function () {
  // 页面可见时，启动定时器；不可见时，停止定时器
  if (document.visibilityState === 'visible') {
    startTimer()
  } else {
    stopTimer()
  }
}

完整代码如下：

启动
停止
计数器：0

效果如下：