分時函數(shù)和函數(shù)節(jié)流的問題不一樣，函數(shù)節(jié)流針對的事件不是用戶主動調用的，前面已經(jīng)提過了。
函數(shù)節(jié)流的原理是：延遲當前函數(shù)的執(zhí)行，如果該次延遲還沒有完成，那么忽略接下來該函數(shù)的請求。也就是說會忽略掉很多函數(shù)請求。
在一些開發(fā)場景中，我們可能會一次性向文檔中注入上千個節(jié)點，在短時間內(nèi)向瀏覽器中大量添加DOM節(jié)點可能會讓瀏覽器吃不消，結果往往會讓瀏覽器卡頓或吃不消，解決方案之一便是使用分時函數(shù)（timeChunk）。
timeChunk分時函數(shù)讓創(chuàng)建節(jié)點的工作分批進行，比如一秒鐘創(chuàng)建1000個節(jié)點，改為每個200ms創(chuàng)建10個節(jié)點。具體timeChunk函數(shù)封裝如下:
function timeChunk( arr, fn, count){//arr 數(shù)組 fn操作函數(shù) count每次操作數(shù)量 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個節(jié)點，可以利用timeChunk分時函數(shù)每200ms連續(xù)添加20個節(jié)點。
var arr = [];for(var i = 1; i <= 1000; i++){ arr.push(i)}var renderLists = timeChunk(arr,function(i){ var div = document.createElement('div'); div.innerHTML = i; document.body.appendChild(div);},20);renderLists(200);以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
