问题描述

限制函数被频繁调用，如短时间内往页面中大量添加DOM节点，会让浏览器吃不消，往往会看到浏览器假死。

解决方案

分时函数，分批进行，比如把1秒钟1000次节点创建，改为每隔200ms创建8个节点。

TimeChunk代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. <script>
  13. /**
  14.   timeChunk，接受4个参数，第一个是创建节点时需要用到的数据，第二个参数是封装了创建节点函数的逻辑，第三个参数是表示每一批创建的节点数量,
  15.   第四个参数是想要每隔多长ms时间执行。
  16. */
  18. const arr = [];
  20. for (let i = 0; i < 1000; i++) {
  21.   arr.push(i);
  22. }
  24. function timeChunk(arr, fn, limit=1, interval=200) {
  25.   let obj;
  27.   let start = function() {
  28.     for (let i = 0; i < Math.min(arr.length, limit); i++) {
  29.       obj = arr.shift();
  30.       fn(obj);
  31.     }
  32.   }
  34.   // 分片执行
  35.   // setTimeInterval
  36.   return function() {
  37.     let timer = null;
  38.     const me = this;
  40.     timer = setInterval(function(){
  41.       // 如果arr为空了，则处理完成
  42.       if (arr.length === 0) {
  43.         return clearInterval(timer);
  44.       }
  45.       start();
  46.     }, interval);
  47.   }
  48. }
  50. const renderFriendList = timeChunk(arr, function(data) {
  51.     const div = document.createElement('div');
  52.     div.innerHTML = data;
  53.     document.body.appendChild(div);
  54. }, 8, 200);
  55. func();
  57. </script>
  58. </html>