Intersection Observer

在日常开发中，经常会遇到对数据、图片进行懒加载的处理，要判断用户是否已经看到了数据或者图片。之前用的方法是通过听到scroll事件或者使用setInterval来判断，这种方法的缺点是，由于scroll事件触发频率高，计算量很大，如果不做防抖节流的话，很容易造成性能问题，而setInterval由于其有间歇期，也会出现体验问题。后来推出了一个新的api——IntersectionObserver。

Intersection Observer 翻译过来即交叉观察器，主要是用于监听目标元素与指定的元素视窗是否发生交叉，一句话总结：Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。Intersection Observer是浏览器提供的构造函数，接受两个参数，callback：可见性发现变化时的回调函数，option：配置对象（可选）。该函数的返回值是一个观察器实例，上面有4个方法：

observe：开始监听特定元素，接收一个target参数，值是Element类型，用来指定被监听的目标元素。如果需要观察多个节点，则需要多次调用。

unobserve：停止监听特定元素，接收一个target参数，值是Element类型，用来指定停止监听的目标元素

disconnect：关闭监听工作，不接收参数，用来关闭监听器

takeRecords：返回所有观察目标的对象数组，不接受参数，返回所有被观察的对象，返回值是一个数组

还有callback 参数，目标元素的可见性变化时，就会调用观察器的回调函数callback。

callback一般会触发两次。一次是目标元素刚刚进入视口，另一次是完全离开视口。

const io = new IntersectionObserver((changes, observer) => {})

callback函数的参数接收两个参数changes和observer：

changes：这是一个数组，每个成员都是一个被观察对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，那么changes数组里面就会打印出两个元素，如果只观察一个元素，我们打印changes[0]就能获取到被观察对象

observer: 这是一个对象，返回我们在实例中传入的第二个参数option（如果没传，则返回默认值）

IntersectionObserver API 可以应用在预加载（滚动加载，翻页加载，无限加载）、懒加载（后加载、惰性加载）

还需要注意的是IntersectionObserver API是异步的，不随着目标元素的滚动同步触发。还有它优先级很低，只有等线程空下来才会执行它。