setInterval和setTimeout优化策略

异步编程当然少不了定时器了，常见的定时器函数有 setTimeout、setInterval、requestAnimationFrame。最常用的是setTimeout，很多人认为 setTimeout 是延时多久，那就应该是多久后执行。

其实这个观点是错误的，因为 JS 是单线程执行的，如果前面的代码影响了性能，就会导致 setTimeout 不会按期执行。当然了，可以通过代码去修正 setTimeout，从而使定时器相对准确：

1
let period = 60 * 1000 * 60 * 2
2
let startTime = new Date().getTime()
3
let count = 0
4
let end = new Date().getTime() + period
5
let interval = 1000
6
let currentInterval = interval
7
function loop() {
8
  count++
9
  // 代码执行所消耗的时间
10
  let offset = new Date().getTime() - (startTime + count * interval);
11
  let diff = end - new Date().getTime()
12
  let h = Math.floor(diff / (60 * 1000 * 60))
13
  let hdiff = diff % (60 * 1000 * 60)
14
  let m = Math.floor(hdiff / (60 * 1000))
15
  let mdiff = hdiff % (60 * 1000)
16
  let s = mdiff / (1000)
17
  let sCeil = Math.ceil(s)
18
  let sFloor = Math.floor(s)
19
  // 得到下一次循环所消耗的时间
20
  currentInterval = interval - offset
21
  console.log('时：'+h, '分：'+m, '毫秒：'+s, '秒向上取整：'+sCeil, '代码执行时间：'+offset, '下次循环间隔'+currentInterval)
22
  setTimeout(loop, currentInterval)
23
}
24
setTimeout(loop, currentInterval)

接下来看 setInterval，其实这个函数作用和 setTimeout 基本一致，只是该函数是每隔一段时间执行一次回调函数。

通常来说不建议使用 setInterval。第一，它和 setTimeout 一样，不能保证在预期的时间执行任务。第二，它存在执行累积的问题，请看以下伪代码

1
function demo() {
2
  setInterval(function(){
3
    console.log(2)
4
  },1000)
5
  sleep(2000)
6
}
7
demo()

以上代码在浏览器环境中，如果定时器执行过程中出现了耗时操作，多个回调函数会在耗时操作结束以后同时执行，这样可能就会带来性能上的问题。

如果有循环定时器的需求，其实完全可以通过 requestAnimationFrame 来实现：

1
function setInterval(callback, interval) {
2
  let timer
3
  const now = Date.now
4
  let startTime = now()
5
  let endTime = startTime
6
  const loop = () => {
7
    timer = window.requestAnimationFrame(loop)
8
    endTime = now()
9
    if (endTime - startTime >= interval) {
10
      startTime = endTime = now()
11
      callback(timer)
12
    }
13
  }
14
  timer = window.requestAnimationFrame(loop)
15
  return timer
16
}
17
let a = 0
18
setInterval(timer => {
19
  console.log(1)
20
  a++
21
  if (a === 3) cancelAnimationFrame(timer)
22
}, 1000)

首先 requestAnimationFrame 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题，当然你也可以通过该函数来实现 setTimeout。