实现数字滚动增加效果

前言：

产品需求：针对数据总计作到动态的增加到后台返回的数据值。效果如同：https://www.uship.com/。

由于不一样位置的增加速度不一样，在网上看到都是用引入插件，例如jquery.animateNumber和numberGrow.js(实现了可见区域动态增加)，都有用法和效果展现。

可是但愿使用原生js来实现，其实但愿代码少和不引用第三方js，而后看到说挖财App使用几行js代码实现了效果：

 1 function countUp(elem, endVal, startVal, duration, decimal) {  
 2     //传入参数依次为 数字要变化的元素，最终显示数字，数字变化开始值，变化持续时间，小数点位数
 3     var startTime = 0;
 4     var dec = Math.pow(10, decimal);//返回10的decimal次幂
 5     var progress,value;
 6     function startCount(timestamp) {
 7         if(!startTime) startTime = timestamp;
 8         progress = timestamp - startTime;
 9         value = startVal + (endVal - startVal) * (progress / duration);
10         value = (value > endVal) ? endVal : value;
11         value = Math.floor(value*dec) / dec;
12         elem.innerHTML = value.toFixed(decimal);
13         // requestAnimationFrame告诉浏览器您但愿执行动画并请求浏览器在下一次重绘以前调用指定的函数来更新动画,代替 setTimeout 实现动画
14         progress < duration && requestAnimationFrame(startCount)
15     }
16     requestAnimationFrame(startCount)
17 }

 

若是你须要在可见区域来执行数字的动态增加，有三个方案：

1.将函数绑定在 scroll 事件上，比较offsetTop 与 seeHeight + scrollTop 的大小。（scroll事件频繁触发）

2.能够对 lazyload 函数进行函数节流（throttle）与函数去抖（debounce）处理。(上面的numberGrow.js博客使用了scrollLazyInit进行懒加载)

3.使用 IntersectionObserver API，

var io = new IntersectionObserver(callback, option);//浏览器提供原生构造函数，观察元素是否可见，callback是可见性变化时的回调函数，option是配置对象（该参数可选）。callbackoption

　　

 

参考文章：延迟加载实现方式