HTML5中的IntersectionObserver接口

HTML5中的IntersectionObserver接口

在前端开发中，有个很重要的概念，叫做懒加载，如监听当页面滚动到底部时加载更多，这个时候，我们通常是使用监听scroll或者使用setInterval来判断，监听底部的元素是否进入视图，其中scroll由于其特别大的计算量，会有性能问题，而setInterval由于其有间歇期，也会出现体验问题

html5中提供了一个IntersectionObserver接口，该接口提供了一种异步观察目标元素与根(root)交叉状态的方法

使用new关键字声明一个新的观察者对象observer

const observer = new IntersectionObserver(callback, options)
callback指定当观察元素与根(root)交叉时的回调函数，此回调函数接受两个参数
    entries：对象数组，每个对象包含触发回调的目标元素与根的相交信息
        boundingClientRect：包含目标元素的边界信息，与element.getBoundingClientRect()相同
        intersectionRatio：目标元素出现在可视区的比例
        intersectionRect：描述root和目标元素的相交区域
        isIntersecting：返回布尔值，下列两种操作均会触发callback
            如果目标元素出现在root可视区，返回true
            如果从root可视区消失，返回false
        rootBounds：用来描述交叉区域观察者中的根.
        target：目标元素
        time：返回从IntersectionObserver的时间原点到交叉被触发的时间的时间戳
    observer：调用回调的观察者对象
options为一个对象，用于配置该观察者的属性，可用属性
    root：指定根的DOM对象。默认为null，表示浏览器窗口
    rootMargin：和css中的margin相似，为根设置外边框
        当观察元素与外边框交叉触发回调，默认0px 0px 0px 0px
    threshold：规定观察者元素与根交叉的比例，值为0.0-1.0的数值
        0.1表示当观察元素与根一旦交叉就触发回调
        1.0表示当观察者完全进入根后触发回调

观察者对象的方法

observe(Element)：向观察者对象添加监听元素，一个观察者对象可以添加多个监听元素

unobserve(Element)：从观察者对象的监听列表中删除指定监听元素

takeRecords()：返回对象数组，每个对象包含目标元素与根每次的相交信息

disconnect()：终止对所有目标元素可见性变化的观察