var arr = [];
 var max = 1000;
 for (let i = 0; i < max; i++) {
    arr.push(i);
 }
// 创建一个分时函数
const timerChunk = (sourceArr, callback, count = 1, wait = 200) => {
  let ret, timer = null;
  const renderData = () => {
    for (let i=0;i<Math.min(count, sourceArr.length);i++) {
      // 取出数据
      ret = sourceArr.shift();
      callback(ret)
    }
  return function() {
    if (!timer) {
      timer = setInterval(() => {
        // 如果数据取完了，清空定时器
        if (sourceArr.length === 0) {
          clearInterval(timer);
          return;
        }
        renderData();
      }, wait)
    }
  }  
  }
}
const createElem = (res) => {
      const appDom = document.getElementById('app');
      const divDom = document.createElement('div');
      divDom.innerHTML = res;
      appDom.appendChild(divDom);
  };
var curentRender = timerChunk(arr, (res) => {
    createElem(res);
    // 每次取10条数据，200ms
}, 10, 200);
 console.time('start');
 curentRender(); // start: 0.0341796875 ms
 console.timeEnd('start');

//以书上的例子总结吧（没有想到更好的方案）浏览器的兼容

//未优化前
let addEvent = function(elem, type, handler) {
  if(window.addEventListener) {
      return elem.addEventListener(type, handler, false)
  }

  if(window.attachEvent) {
      return elem.attachEvent(`on${type}`, handler)
  }
}

//缺点：每次加载都需要进行判断进入里面的if条件



//第一次优化：

let addEvent = (function() {
   if(window.addEventListener) {
      return function() {
          elem.addEventListener(type, handler, false)
      }
   }

   if(window.attachEvent) {
      return function() {
          elem.attachEvent(`on${type}`, handler)
      }
   }
})();
//优化后的缺点是 平白无故先调用了下addEvent



//第二次优化就是咱们的惰性加载函数看看是什么样的
let addEvent = function(ele, type, handler) {
      if(window.addEventListener) {
          addEvent = function(ele, type, handler) {
            ele.addEventListener(type, handler, false);
          }
      }else if(window.attachEvent) {
         addEvent = function(ele, type, handler) {
            ele.attachEvent(`on${type}`, handler)
         }
      }

    
      addEvent(ele, type, handler);
  }

//咱们大致分析下这个函数
//1、在使用的第一次判断了下 
//2、直接更改了addEvent(这个时候的addEvent已经是判断后的了，在下次就不会在进行判断了)
//3、为什么在底部执行了一遍  addEvent(ele, type, handler)？ 其实就是更改后的函数调用下，不能就返回一个函数。第一次没出发吧