手册   游戏   WEB   字典   单词   在线工具  

JS大数据量时用的分时加载

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title> 分时加载 </title> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
  7. <style> 
  8. button { width:200px; height:50px; }
  9. #lay {margin:0 auto; width: 670px; } 
  10. #userlist { width:502px; border:1px solid #8C8C8C; margin-left:50px; margin-top:10px; height:30px; border-collapse:collapse; font-size:12px; } 
  11. #userlist thead td { height:25px; border:1px solid #8C8C8C; text-align:center; background-color:#00CC00; } 
  12. #userlist tbody td { height:25px; border:1px solid #8C8C8C; text-align:center; } 
  13. </style> 
  14. </head> 
  15. <body> 
  16. <div id="lay"> 
  17. <button id="resetBtn">重置</button> 
  18. <button id="tradBtn">传统加载</button> 
  19. <button id="timeBtn">分时加载</button> 
  20. <div style="width:500px; border:1px solid #000; background-color:#FFF; margin-left:50px; margin-top:10px; "> 
  21.     <div id="processBar" style="width:0; height:35px; background-color:#003366; line-height:35px; color:#FFF; "></div> 
  22. </div> 
  23. <table id="userlist"> 
  24.     <thead><tr><td>用户列表</td></tr></thead> 
  25.     <tbody></tbody> 
  26. </table> 
  27. </div> 
  28. <script> 
  29. var loadDemo = function() { 
  30.     var $ = function(id) { return document.getElementById(id); }, 
  31.         resetBtn = $('resetBtn'), tradBtn = $('tradBtn'), timeBtn = $('timeBtn'),progress = $('processBar'),  
  32.         userlist = $('userlist'), tbody = userlist.tBodies[0], i, n = 1, JSON_DATA = []; 
  33.    
  34.     // 创建用户列表 
  35.     function addItem(data) { 
  36.         var tr = document.createElement('tr'); 
  37.         var td = document.createElement('td'); 
  38.         td.appendChild(document.createTextNode(data[0])); 
  39.         tr.appendChild(td); 
  40.         tbody.appendChild(tr); 
  41.         if(++n % 10 == 0) progressing(); 
  42.     } 
  43.     // 加载进度 
  44.     function progressing() { 
  45.         progress.style.width = (progress.offsetWidth + 1) + 'px'; 
  46.     } 
  47.     // 清空用户列表 
  48.     function reset() { 
  49.         resetBtn.disabled = true; 
  50.         tradBtn.disabled = false; 
  51.         timeBtn.disabled = false; 
  52.         if(window.ActiveXObject) { // IE 
  53.             var temp = document.createElement('div'); 
  54.             temp.innerHTML = '<table><tbody></tbody></table>'; 
  55.             userlist.replaceChild(temp.firstChild.tBodies[0], tbody); 
  56.             tbody = userlist.tBodies[0]; 
  57.         } else { 
  58.             tbody.innerHTML = ''; 
  59.         } 
  60.         progress.innerHTML = ''; 
  61.         progress.style.width = 0; 
  62.         n = 1; 
  63.     } 
  64.     // 分时函数[*****] 
  65.     function timedChunk(items, process, context, callback) { 
  66.         var todo = items.concat(), delay = 25; 
  67.         setTimeout(function() { 
  68.             var start = +new Date(); 
  69.             do { 
  70.                 process.call(context, todo.shift()); 
  71.             } while (todo.length > 0 && (+new Date() - start < 50)) 
  72.             if(todo.length > 0) { 
  73.                 setTimeout(arguments.callee, 25); 
  74.             } else if(callback) { 
  75.                 callback(); 
  76.             } 
  77.         }, delay); 
  78.     } 
  79.     // 分时加载 
  80.     function testTimed() { 
  81.         resetBtn.disabled = true; 
  82.         tradBtn.disabled = true; 
  83.         timeBtn.disabled = true; 
  84.         var start = +new Date(), end; 
  85.         timedChunk(JSON_DATA, addItem, null, function() { 
  86.             resetBtn.disabled = false; 
  87.             end = +new Date(); 
  88.             progress.innerHTML = (end - start) + ' ms'; 
  89.         }); 
  90.     } 
  91.     // 传统加载 
  92.     function testTrad() { 
  93.         resetBtn.disabled = true; 
  94.         tradBtn.disabled = true; 
  95.         timeBtn.disabled = true; 
  96.         var start = +new Date(), end; 
  97.         for(var i = 0, len = JSON_DATA.length; i < len; i++) { 
  98.             addItem(JSON_DATA[i]); 
  99.         } 
  100.         end = +new Date(); 
  101.  resetBtn.disabled = false; 
  102.         progress.innerHTML = (end - start) + ' ms'; 
  103.     } 
  104.    
  105.     return { 
  106.         run: function() { 
  107.             // 模拟用户数据 
  108.             for(i = 1; i <= 5000; i++) { 
  109.                 JSON_DATA.push(['用户名称' + i]); 
  110.             } 
  111.             resetBtn.onclick = function() { reset(); } 
  112.             tradBtn.onclick = function() { testTrad(); } 
  113.             timeBtn.onclick = function() { testTimed(); } 
  114.         } 
  115.     } 
  116. }(); 
  117.    
  118. loadDemo.run(); 
  119.    
  120. </script> 
  121. </body> 
  122. </html>
  123. //该片段来自于http://www.codesnippet.cn/detail/131120137112.html

来源: http://www.codesnippet.cn/detail/131120137112.html


与本文相关文章

  1. Js 表格, 万条数据瞬间加载
  2. JavaScript_动态加载CSS和JS文件
  3. JS 实现图片懒加载
  4. ECHO.js 纯javascript轻量级延迟加载的实例代码
  5. javascript 按顺序加载运行 js 方法
  6. vue.JS 怎么加载 JS 插件?
  7. js加载之使用DOM方法动态加载Javascript文件
  8. JS 实现无限分页加载 -- 原理图解
暂无,快来抢沙发吧！
更多





黑ICP备17005318号-1