需求背景：用户可以在页面自定义增加图表(echarts)，防止当用户添加的图表过多时，加载数据导致渲染时间过长

一、IntersectionObserver介绍

首先要看一下官方对其api的解释：提供了一种异步（重点）观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。 从这句话不难理解，第一，需要一个监测目标，也就是监测范围，好比找一个人需要确定他在那个省或则市区。第二，需要一个监测的对象，也就是我具体要找的人是谁。第三，也就是监测的对象一定要在我监测的目标范围内。 既然知道它具体是做什么以及怎么做，后面就需要知道代码怎么实现，下面是官方定义代码：

var intersectionObserver = new IntersectionObserver(function(entries) {
 // If intersectionRatio is 0, the target is out of view
 // and we do not need to do anything.
 if (entries[0].intersectionRatio <= 0) return;

 loadItems(10);
 console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

从上面代码不难看出，其实它就是一个构造函数，接受一个构造函数。首先需要我们对其进行实例化一个对象，实例化的对象对其进行observe方法的调用，传递一个dom节点(这就是我们要具体监听的对象)，通过官方说明，是否觉得缺了什么，对，就是其父亲顶级root怎么没有地方配置了，不着急，让我们看看其属性配置

二、常用属性介绍

其属性有很多，想具体看一下每一个可以去官方文档，我在这里就不一一解释了。传值方式如下：

function callback(){}
new IntersectionObserve(callback, {
    root: dcoument.querySelector('body'), // 监听范围
    rootMargin: '0px 0px 0px 0px', // 监听范围的位置偏移量
    thresholds:[0] // 监测对象出现在视口的百分比位置口触发，取值范围是0-1
})

具体项目中使用IntersectionObserver代码如下：

    var io = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        let { target, intersectionRatio } = entry
        // 目标元素的可见比例大于0
        if (intersectionRatio) {
          // 取消监听，防止重复加载
          io.unobserve(target)
        }
      })
    }, {
      //设置多个阈值，防止第一次没监听到
      threshold: [0.0001, 0.001, 0.01, 0],
      //设置监听的根元素
      // root: document.getElementsByClassName('layout')[0]
    })
    //element为要监听的元素的list
    io.observe(element)

具体项目中使用IntersectionObserver实现懒加载效果如下 控制台输出的为组件componentDidMount时输出的下标