實現數字滾動增加效果

前言：

產品需求：針對數據總計作到動態的增加到後臺返回的數據值。效果如同：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

　　

 

參考文章：延遲加載實現方式