首頁 > web前端 > js教程 > JS使用分時函數最佳化程式碼

JS使用分時函數最佳化程式碼

php中世界最好的语言
發布: 2018-05-11 15:03:06
原創
1404 人瀏覽過

這次帶給大家JS使用分時函數優化程式碼,JS使用分時函數優化的注意事項有哪些,下面就是實戰案例,一起來看一下。

函數節流的原理是:延遲目前函數的執行,如果該次延遲還沒有完成,那麼忽略接下來該函數的請求。也就是說會忽略掉很多函數請求。

在一些開發場景中,我們可能會一次向文件中註入上千個節點,在短時間內向瀏覽器中大量添加DOM節點可能會讓瀏覽器吃不消,結果往往會讓瀏覽器卡頓或吃不消,解決方案之一便是使用分時函數(timeChunk)。

timeChunk分時函數讓創建節點的工作分批進行,例如一秒鐘創建1000個節點,改為每個200ms創建10個節點。具體timeChunk函數封裝如下:

function timeChunk( arr, fn, count){//arr 数组 fn操作函数 count每次操作数量
  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個節點,可以利用timeChunk分時函數每200ms連續加入20個節點。

var arr = [];
for(var i = 1; i <= 1000; i++){
  arr.push(i)
}
var renderLists = timeChunk(arr,function(i){
  var p = document.createElement('p');
  p.innerHTML = i;
  document.body.appendChild(p);
},20);
renderLists(200);
登入後複製

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

vue環境傳遞參數打包不同網域代碼分析

Vue如何操作html欄位字串轉換為HTML標籤

以上是JS使用分時函數最佳化程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板