JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù)實(shí)例分析
本文實(shí)例講述了JavaScript高級(jí)函數(shù)應(yīng)用之分時(shí)函數(shù)。分享給大家供大家參考,具體如下:
一、前提介紹:
某些函數(shù)是用戶主動(dòng)調(diào)用的,但因?yàn)橐恍┛陀^的原因,這些函數(shù)會(huì)嚴(yán)重影響頁面的性能。
二、應(yīng)用場(chǎng)景:
在短時(shí)間內(nèi)往頁面中大量添加DOM節(jié)點(diǎn)顯然會(huì)讓瀏覽器吃不消,往往會(huì)導(dǎo)致瀏覽器的卡頓甚至假死。
三、解決方案:
以上述添加節(jié)點(diǎn)的例子來說明問題,我們將創(chuàng)建節(jié)點(diǎn)的工作分批進(jìn)行,比如把1秒鐘創(chuàng)建1000個(gè)節(jié)點(diǎn),改為每隔200毫秒創(chuàng)建8個(gè)節(jié)點(diǎn)。
四、實(shí)現(xiàn)代碼如下:
var timeChunk = function(ary, fn, count){
var obj,t;
var len = ary.length;
var start = function(){
for(var i=0;i<Math.min(count ||1, ary.length );i++){
var obj = ary.shift();
fn(obj);
}
};
return function(){
t = setInterval(function(){
if(ary.length === 0){ //如果全部節(jié)點(diǎn)都已經(jīng)被創(chuàng)建好
return clearInterval(t);
}
start();
}, 200); //分批執(zhí)行的時(shí)間間隔,也可以用參數(shù)的形式傳入
};
};
五、調(diào)用驗(yàn)證方法
var ary = ['aa','bb','cc',.....];
var renderFriendList = timeChunk( ary, function(n){
var div = document.createElement('div');
div.innerHTML = n;
document.body.appendChild(div);
},8);
renderFriendList();
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript性能優(yōu)化之分時(shí)函數(shù)的介紹
- JavaScript中的高級(jí)函數(shù)
- 深入解析JavaScript中函數(shù)的Currying柯里化
- javascript中有趣的反柯里化深入分析
- JavaScript函數(shù)柯里化詳解
- javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法
- 深入剖析JavaScript中的函數(shù)currying柯里化
- javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】
- 深入淺出理解JavaScript高級(jí)定時(shí)器原理與用法
- Js setInterval與setTimeout(定時(shí)執(zhí)行與循環(huán)執(zhí)行)的代碼(可以傳入?yún)?shù))
- js定時(shí)器的使用(實(shí)例講解)
相關(guān)文章
JavaScript如何實(shí)現(xiàn)數(shù)組內(nèi)的值累加
我們會(huì)經(jīng)常在開發(fā)過程中,需要獲取數(shù)組中的值累加,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript如何實(shí)現(xiàn)數(shù)組內(nèi)的值累加的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-11-11
JavaScript調(diào)用Activex控件的事件的實(shí)現(xiàn)方法
最近在搞一個(gè)客戶端調(diào)用activex控件的開發(fā)。一些實(shí)現(xiàn)方法小結(jié),需要的朋友可以參考下。2010-04-04
javascript js 操作數(shù)組 增刪改查的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨avascript js 操作數(shù)組 增刪改查的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
JavaScript之Canvas_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之Canvas,Canvas是HTML5新增的組件,它就像一塊幕布,可以用JavaScript在上面繪制各種圖表、動(dòng)畫等2017-07-07
把input初始值不寫value的具體實(shí)現(xiàn)方法
比如制作一個(gè)最常見的,input初始值,一般以前,我都只是寫在input的value里,要把初始值單獨(dú)寫出來,就用<span>標(biāo)簽寫,定位在input上,讓它單擊和input獲焦上都消失2013-07-07
JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08
javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04
javascript中export?和export?default的區(qū)別
本文主要介紹了javascript中export?和export?default的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07

