qt定时器暂停与重新开始_手把手教你写个小程序定时器管理库

背景

凹凸曼是个小程序开发者，他要在小程序实现秒杀倒计时。于是他不假思索，写了以下代码：

Page({
    
init: function () {
    
    clearInterval(this.timer)
this.timer = setInterval(() => {
    
// 倒计时计算逻辑
console.log('setInterval')
    })
  },
})

可是，凹凸曼发现页面隐藏在后台时，定时器还在不断运行。于是凹凸曼优化了一下，在页面展示的时候运行，隐藏的时候就暂停。

Page({
    
onShow: function () {
    
if (this.timer) {
    
this.timer = setInterval(() => {
    
// 倒计时计算逻辑
console.log('setInterval')
      })
    }
  },
onHide: function () {
    
    clearInterval(this.timer)
  },
init: function () {
    
    clearInterval(this.timer)
this.timer = setInterval(() => {
    
// 倒计时计算逻辑
console.log('setInterval')
    })
  },
})

问题看起来已经解决了，就在凹凸曼开心地搓搓小手暗暗欢喜时，突然发现小程序页面销毁时是不一定会调用 onHide 函数的，这样定时器不就没法清理了？那可是会造成内存泄漏的。凹凸曼想了想，其实问题不难解决，在页面 onUnload 的时候也清理一遍定时器就可以了。

Page({
    
  ...
  onUnload: function () {
    
    clearInterval(this.timer)
  },
})

这下问题都解决了，但我们可以发现，在小程序使用定时器需要很谨慎，一不小心就会造成内存泄漏。 后台的定时器积累得越多，小程序就越卡，耗电量也越大，最终导致程序卡死甚至崩溃。特别是团队开发的项目，很难确保每个成员都正确清理了定时器。因此，写一个定时器管理库来管理定时器的生命周期，将大有裨益。

思路整理

首先，我们先设计定时器的 API 规范，肯定是越接近原生 API 越好，这样开发者可以无痛替换。

function $setTimeout(fn, timeout, ...arg) {}
function $setInterval(fn, timeout, ...arg) {}
function $clearTimeout(id) {}
function $clearInterval(id) {}

接下来我们主要解决以下两个问题

1. 如何实现定时器暂停和恢复
2. 如何让开发者无须在生命周期函数处理定时器

如何实现定时器暂停和恢复

思路如下:

1. 将定时器函数参数保存，恢复定时器时重新创建
2. 由于重新创建定时器，定时器 ID 会不同，因此需要自定义全局唯一 ID 来标识定时器
3. 隐藏时记录定时器剩余倒计时时间，恢复时使用剩余时间重新创建定时器

首先我们需要定义一个 Timer 类，Timer 对象会存储定时器函数参数，代码如下

class Timer {
    
static count = 0
/**
     * 构造函数
     * @param {Boolean} isInterval 是否是 setInterval
     * @param {Function} fn 回调函数
     * @param {Number} timeout 定时器执行时间间隔
     * @param  {...any} arg 定时器其他参数
     */
constructor (isInterval = false, fn = () => {}, timeout = 0, ...arg) {
    
this.id = ++Timer.count // 定时器递增 id
this.fn = fn
this.timeout = timeout
this.restTime = timeout // 定时器剩余计时时间
this.isInterval = isInterval
this.arg = arg
    }
  }

// 创建定时