這次帶給大家函數節流與分時函數使用步驟詳解,函數節流與分時函數使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
分時函數和函數節流的問題不一樣,函數節流針對的事件不是用戶主動呼叫的,前面已經提過了。
函數節流的原理是:延遲目前函數的執行,如果該次延遲還沒有完成,那麼忽略接下來該函數的請求。也就是說會忽略掉很多函數請求。
在某些開發場景中,我們可能會一次向文件中註入上千個節點,在短時間內向瀏覽器中大量添加DOM節點可能會讓瀏覽器吃不消,結果往往會讓瀏覽器卡頓或吃不消,解決方案之一便是使用分時函數(timeChunk)。
timeChunk分時函數讓創建節點的工作分批進行,例如一秒鐘創建1000個節點,改為每個200ms創建10個節點。具體timeChunk函數封裝如下:
function timeChunk( arr, fn, count){//arr 数组 fn操作函数 count每次操作数量 var obj, t; var start = function(){ var len = Math.min(count||1,arr.length); for(var i=0; i < len; i++){ obj = arr.shift(); fn(obj) } }; return function(interval){ t = setInterval(function(){ if(arr.length==0){ return clearInterval(t) }; start(); },interval||200) } }
應用程式:
#加入我們要在文件中加入1000個節點,可以利用timeChunk分時函數每200ms連續加入20個節點。
var arr = []; for(var i = 1; i <= 1000; i++){ arr.push(i) } var renderLists = timeChunk(arr,function(i){ var p = document.createElement('p'); p.innerHTML = i; document.body.appendChild(p); },20); renderLists(200);
我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是函數節流與分時函數使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!