javascript性能優(yōu)化之分時函數(shù)的介紹
更新時間：2018年03月28日 14:17:42 作者：KaRaoXake
本篇文章主要介紹了javascript性能優(yōu)化之分時函數(shù)的介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
分時函數(shù)和函數(shù)節(jié)流的問題不一樣，函數(shù)節(jié)流針對的事件不是用戶主動調(diào)用的，前面已經(jīng)提過了。
函數(shù)節(jié)流的原理是：延遲當(dāng)前函數(shù)的執(zhí)行，如果該次延遲還沒有完成，那么忽略接下來該函數(shù)的請求。也就是說會忽略掉很多函數(shù)請求。
在一些開發(fā)場景中，我們可能會一次性向文檔中注入上千個節(jié)點，在短時間內(nèi)向瀏覽器中大量添加DOM節(jié)點可能會讓瀏覽器吃不消，結(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)
}
}
應(yīng)用：
加入我們要在文檔中添加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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
近日,一篇《疫苗之王》刷爆了朋友圈,疫苗的安全問題被推到了風(fēng)口浪尖,騰訊安全反詐實驗室團隊推出了“騰訊安心計劃”小程序,方便用戶便捷地查詢疫苗安全信2018-07-07
這篇文章主要介紹了基于JavaScript實現(xiàn)的快速排序算法,分析了快速排序的原理并結(jié)合實例形式給出了javascript快速排序的操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了微信小程序自定義聯(lián)系人彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
javascript實現(xiàn)字符串反轉(zhuǎn)的方法
這篇文章主要介紹了javascript實現(xiàn)字符串反轉(zhuǎn)的方法,實例分析了javascript實現(xiàn)字符串反轉(zhuǎn)的技巧,需要的朋友可以參考下2015-02-02
本文主要介紹了JavaScript本地存儲實現(xiàn)用戶名存儲案例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
談?wù)別ncodeURI和encodeURIComponent以及escape的區(qū)別與應(yīng)用
encodeURI和encodeURIComponent以及escape，這三個都是用來編碼的，本篇文章給大家介紹encodeURI和encodeURIComponent以及escape的區(qū)別與應(yīng)用，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要介紹了使用tangram框架響應(yīng)式加載圖片的方法，大家可以參考使用2013-11-11
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)列表刪除功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
layui實現(xiàn)把數(shù)據(jù)表格時間戳轉(zhuǎn)換為時間格式的例子
今天小編就為大家分享一篇layui實現(xiàn)把數(shù)據(jù)表格時間戳轉(zhuǎn)換為時間格式的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了js怎么覆蓋原有方法實現(xiàn)重寫,需要的朋友可以參考下2014-09-09