实现数字滚动增长效果

前言：

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

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

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

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

如果你需要在可见区域来执行数字的动态增长，有三个方案：

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

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

3.使用 IntersectionObserver API，

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

　　

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