web端在進行大量DOM數據插入的時候,如果一次性插入上千條數據,浏覽器吃不消會出現卡頓假死的情況,代碼如下:
var arr = []; for(var i = 0; i < 1000; i++){ arr.push(i); } var loadData = function(data){ for(var i = 0, l = data.length; i < l; i++){ var elem = document.createElement('div'); div.innerHTML = i; document.body.appendChild(div); } }; loadData(arr); //創建timeChunk()函數分批插入DOM var timeChunk = function(data, fn, count, interval ){) //data數據 fn執行的邏輯函數 count一次插入的數量 interval分批執行的時間 var obj,t; var len = arr.length; var start = function(){ for(var i = 0; i < Math.min(count || 1, arr.length), i++){ var obj = arr.shift(); fn(obj); } }; return function(){ t = setInterval(function(){ if(arr.length === 0){ return clearInterval(t); } }, interval) } }