数字递增效果

前言

其实目前组件库很多，都含有数字统计组件，那么，我为什么折磨自己自己写呢，因为目前我们的项目和三维模型合作（痛苦面具.jpg），他们建模本身占用的资源就很大，又不能砍，所以折磨的只有我了，项目初期告诉我的是能不用组件库的就不要用，所以出现了我手撸数字递增组件的事情。

其实这个效果实现不难，大家应该都想到了定时器是吧，但是！还是那句话他们建模本身占用的资源太大了，页面又有多个指标调用定时器，还有些轮播的效果，以及拓扑的定时加载等等等，导致还是很卡，并且递增也边的卡卡的qwq，果不其然，客户提了这个问题，所以出现了今日的进步

定时器 setInterval() 方法

重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。这个应该都不陌生了，就简单介绍一下，顺便做一下延时器的拓展，今日主角不是它。

用法

setInterval(code)
setInterval(code, delay)

setInterval(func)
setInterval(func, delay)
setInterval(func, delay, arg1)
setInterval(func, delay, arg1, arg2)
setInterval(func, delay, arg1, arg2, /* …, */ argN)

参数说明

**func：**每隔一段时间（delay毫秒）执行一次的函数，初次执行发生在delay毫秒之后（注意！如果想要立即执行就需要在定时器之前先执行一次）

**code：**可以传递一个字符串来代替函数，传递的字符串会被编译然后每经过 delay 毫秒执行一次。(注意！存在安全风险，慎用)

delay：（可填可不填）计时器每次执行指定的函数和代码的延迟时间（以毫秒——千分之一秒——为单位）。如果未指定，则其默认值为 0。

argN： 当计时器结束的时候，将被传递给 func 函数的附加参数。

销毁 clearInterval()

需要注意的是，延时器setTimeout()和定时器的使用十分类似，并且这两个的销毁方法是可以互换使用的，但是，养成良好的代码习惯，最好不要这样使用，避免混淆。

requestAnimationFrame() 方法

这个方法会告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。对回调函数的调用频率通常与显示器的刷新率相匹配。

我是通过这个进行改进的数字递增组件，需要注意requestAnimationFrame()`是一次性的。想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用requestAnimationFrame()。

警告： 请确保总是使用第一个参数（或其他一些获取当前时间的方法）来计算动画在一帧中的进度， 否则动画在高刷新率的屏幕中会运行得更快 。

用法

requestAnimationFrame(callback)

参数

callback： 下一次重绘更新动画时被调用的回调函数，这个回调函数只会传递一个参数：一个 DOMHighResTimeStamp 参数，用于表示上一帧渲染的结束时间

当 requestAnimationFrame() 队列中的多个回调开始在同一帧中触发时，它们都会收到相同的时间戳，即便在计算前一个回调函数工作量时这一帧的时间已经过去。

取消动画帧 cancelAnimationFrame()

取消一个先前通过调用 window.requestAnimationFrame() 方法添加到计划中的动画帧请求。

碎碎念

我是使用了requestAnimationFrame()做数字递增的效果，事实上这个方法的使用远不止如此，可以使用这个来做各种动画效果（三维那边建模上的一些流光动效就是使用的这个方法），前端真是，学无止境啊

不许不进步！！！

不许不进步！！！

不许不进步！！！