您好,登錄后才能下訂單哦!
這篇文章主要介紹JavaScript高級函數(shù)應(yīng)用之如何使用分時函數(shù),文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
具體如下:
一、前提介紹:
某些函數(shù)是用戶主動調(diào)用的,但因為一些客觀的原因,這些函數(shù)會嚴(yán)重影響頁面的性能。
二、應(yīng)用場景:
在短時間內(nèi)往頁面中大量添加DOM節(jié)點顯然會讓瀏覽器吃不消,往往會導(dǎo)致瀏覽器的卡頓甚至假死。
三、解決方案:
以上述添加節(jié)點的例子來說明問題,我們將創(chuàng)建節(jié)點的工作分批進行,比如把1秒鐘創(chuàng)建1000個節(jié)點,改為每隔200毫秒創(chuàng)建8個節(jié)點。
四、實現(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é)點都已經(jīng)被創(chuàng)建好 return clearInterval(t); } start(); }, 200); //分批執(zhí)行的時間間隔,也可以用參數(shù)的形式傳入 }; };
五、調(diào)用驗證方法
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();
以上是“JavaScript高級函數(shù)應(yīng)用之如何使用分時函數(shù)”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。