>[success] # 分时函数 ~~~ 1.参考js设计模式与开发实践书： 举一个例子是创建WebQQ 的QQ 好友列表。列表中通常会有成百上千个好友， 如果一个好友用一个节点来表示，当我们在页面中渲染这个列表的时候， 可能要一次性往页面中创建成百上千个节点。在短时间内往页面中大量添加DOM 节点显然也会让浏览器吃不消，我们看到的结果往往就是浏览器的卡顿甚至假死 ~~~ >[danger] ##### 传统直接写 ~~~ var ary = []; for (var i = 1; i <= 1000; i++) { ary.push(i); // 假设ary 装载了1000 个好友的数据 }; var renderFriendList = function (data) { for (var i = 0, l = data.length; i < l; i++) { var div = document.createElement('div'); div.innerHTML = i; document.body.appendChild(div); } }; renderFriendList(ary); ~~~ >[danger] ##### 分时函数解决 ~~~ 1.解决方案之一是下面的timeChunk 函数，timeChunk 函数让创建节点的工作分批进行， 比如把1 秒钟创建1000 个节点，改为每隔200 毫秒创建8 个节点。timeChunk 函数接受3 个参数，第1 个参数是创建节点时需要用到的数据，第2 个参数是封装了创建节点逻辑的 函数，第3 个参数表示每一批创建的节点数量 ~~~ ~~~ 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) { // 如果全部节点都已经被创建好 return clearInterval(t); } start(); }, 200); // 分批执行的时间间隔，也可以用参数的形式传入 }; }; ~~~ * 使用 ~~~ var ary = []; for (var i = 1; i <= 1000; i++) { ary.push(i); }; var renderFriendList = timeChunk(ary, function (n) { var div = document.createElement('div'); div.innerHTML = n; document.body.appendChild(div); }, 8); renderFriendList(); ~~~