亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript性能優(yōu)化之分時(shí)函數(shù)的介紹

 更新時(shí)間：2018年03月28日 14:17:42   作者：KaRaoXake  
本篇文章主要介紹了javascript性能優(yōu)化之分時(shí)函數(shù)的介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

分時(shí)函數(shù)和函數(shù)節(jié)流的問題不一樣，函數(shù)節(jié)流針對的事件不是用戶主動調(diào)用的，前面已經(jīng)提過了。

函數(shù)節(jié)流的原理是：延遲當(dāng)前函數(shù)的執(zhí)行，如果該次延遲還沒有完成，那么忽略接下來該函數(shù)的請求。也就是說會忽略掉很多函數(shù)請求。

在一些開發(fā)場景中，我們可能會一次性向文檔中注入上千個節(jié)點(diǎn)，在短時(shí)間內(nèi)向?yàn)g覽器中大量添加DOM節(jié)點(diǎn)可能會讓瀏覽器吃不消，結(jié)果往往會讓瀏覽器卡頓或吃不消，解決方案之一便是使用分時(shí)函數(shù)（timeChunk）。

timeChunk分時(shí)函數(shù)讓創(chuàng)建節(jié)點(diǎn)的工作分批進(jìn)行，比如一秒鐘創(chuàng)建1000個節(jié)點(diǎn)，改為每個200ms創(chuàng)建10個節(jié)點(diǎn)。具體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é)點(diǎn)，可以利用timeChunk分時(shí)函數(shù)每200ms連續(xù)添加20個節(jié)點(diǎn)。

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)文章

最新評論