引言
本文是深入浅出 ahooks 源码系列文章的第七篇，这个系列的目标主要有以下几点：
- 加深对 React hooks 的理解。
- 学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。
- 培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。
注：本系列对 ahooks 的源码解析是基于 v3.3.13。自己 folk 了一份源码，主要是对源码做了一些解读，可见 详情。
今天我们来聊聊定时器。
useInterval 和 useTimeout
看名称，我们就能大概知道，它们的功能对应的是 setInterval 和 setTimeout，那对比后者有什么优势？
先看 useInterval，代码简单，如下所示：
function useInterval(
fn: () => void,
delay: number | undefined,
options?: {
immediate?: boolean;
},
) {
const immediate = options?.immediate;
const fnRef = useLatest(fn);
useEffect(() => {
// 忽略部分代码...
// 立即执行
if (immediate) {
fnRef.current();
}
const timer = setInterval(() => {
fnRef.current();
}, delay);
// 清除定时器
return () => {
clearInterval(timer);
};
// 动态修改 delay 以实现定时器间隔变化与暂停。
}, [delay]);
}
跟 setInterval 的区别如下：
- 可以支持第三个参数，通过 immediate 能够立即执行我们的定时器。
- 在变更 delay 的时候，会自动清除旧的定时器，并同时启动新的定时器。
- 通过 useEffect 的返回清除机制，开发者不需要关注清除定时器的逻辑，避免内存泄露问题。这点是很多开发者会忽略的点。
useTimeout 跟上面很类似，如下所示，不再做额外解释：
function useTimeout(fn: () => void, delay: number | undefined): void {
const fnRef = useLatest(fn);
useEffect(() => {
// ...忽略部分代码
const timer = setTimeout(() => {
fnRef.current();
}, delay);
return () => {
clearTimeout(timer);
};
// 动态修改 delay 以实现定时器间隔变化与暂停。
}, [delay]);
}
setTimeout 和 setInterval 的问题
首先，setTimeout 和 setInterval 作为事件循环中宏任务的“两大主力”，它的执行时机不能跟我们预期一样准确的，它需要等待前面任务的执行。比如下面的 setTimeout 的第二个参数设置为 0，并不会立即执行。
setTimeout(() => {
console.log('test');
}, 0)
另外还有一种情况，setTimeout 和 setInterval 在浏览器不可见的时候（比如最小化的时候），不同的浏览器中设置不同的时间间隔的时候，其表现不一样。根据 当浏览器切换到其他标签页或者最小化时，你的js定时器还准时吗？ 这篇文章的实践结论如下：
谷歌浏览器中，当页面处于不可见状态时，setInterval 的最小间隔时间会被限制为 1s。火狐浏览器的 setInterval 和谷歌特性一致，但是 ie 浏览器没有对不可见状态时的 setInterval 进行性能优化，不可见前后间隔时间不变。
在谷歌浏览器中，setTimeout在浏览器不可见状态下间隔低于1s的会变为1s，大于等于1s的会变成N+1s的间隔值。火狐浏览器下setTimeout的最小间隔时间会变为1s,大于等于1s的间隔不变。ie浏览器在不可见状态前后的间隔时间不变。
这个结论，我没有验证过，但看起来差异挺大，其中还提到了另外一个选择，就是 requestAnimationFrame。
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐藏的