JS中的观察者们（Observers）

最新推荐文章于 2024-11-21 23:24:05 发布

smiley121

最新推荐文章于 2024-11-21 23:24:05 发布

阅读量1.1k

点赞数 27

文章标签： javascript ovserver

本文链接：https://blog.youkuaiyun.com/qq_44376306/article/details/142790033

版权

JS中的观察者们

JS中的几个观察者(Observer) API

Intersection Observer
Mutation Observer
Resize Observer
Performance Observer

1、IntersectionObserver

当你想监听某个元素，当它在视口中可见的时候希望可以得到通知，这个API就是最佳的选择了。以往我们的做法是绑定容器的scroll事件，或者设定时器不停地调用getBoundingClientRect() 获取元素位置，这样做的性能会很差，因为每次获取元素的位置都会引起整个布局的重新计算。还有一个场景是，如果你的元素被放在iframe里，如一些广告，想要知道他们何时出现几乎是不可能的。

现在，我们完全可以把这些工作交给IntersectionObserver了，IntersectionObserver 提供了一个高效的方式来检测元素的进入和离开视口，能够应用于多种场景，有助于提升性能和用户体验。你可以根据具体场景来选择合适的应用方法和思路。

1.1、怎么用？

实例化一个观察器：

var observer = new IntersectionObserver(callback[, options]);

callback 是一个回调函数，里面返回监听目标元素的实时数据组成的数组
- time 时间戳
- rootBounds 根元素的位置信息
- boundingClientRect 目标元素的位置信息
- intersectionRect 交叉部分的位置信息
- intersectionRatio 目标元素的可见比例，看下图示
- target等
options 是一些配置
- root 目标元素的祖先元素，即该元素必须是目标元素的直接或间接父级
- rootMargin 一个在计算交叉值时添加至root的边界盒中的一组偏移量，写法类似CSS的margin
- threshold 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组0.0到1.0之间的数组

开始监听元素：

observer.observe(target)

此外，还有两个方法：

停止对某目标的监听

observer.unobserve(target)

终止对所有目标的监听

1.2、demo 🌰↓

做一个视频流的简单demo，当视频滚动到全部出现在屏幕的时候播放，并暂停其他“滚出”屏幕的或者还未“滚进来”的视频。

（滚动看效果，括号里显示的是每个元素在观察视口的可见比例）

主要代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intersection Observer Video Demo</title>
    <style>
        body {
     
            height: 200vh; /* 让页面变长，以便可以滚动 */
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        video {
     
            width: 80%;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <video src="video1.mp4" muted></video>
    <video src="video2.mp4" muted></video>
    <video src="video3.mp4" muted></video>
    <script>
	    // 选择所有的视频元素
		const videos = document.querySelectorAll('video');
		
		// 创建 IntersectionObserver 实例
		const observer