IntersectionObserver threshold 数组怎么设计：可见比例回调与首屏曝光去重

列表页做首屏曝光时，最容易踩的坑不是 API 不会用，而是把一次元素进入视口误写成“每次回调都上报”。当 threshold 配成多个比例后，同一个卡片可能连续收到多次通知。更稳的做法是让 IntersectionObserver 负责告诉你“可见比例跨过了哪一档”，再用 Set 记录已经上报的卡片。

threshold 决定回调触发的可见比例档位，intersectionRatio 负责读取当前比例；如果业务只要一次首屏曝光，就必须显式做去重。

先把“进入视口”和“看到多少”分开

IntersectionObserver 观察的是目标元素与 root 的交集变化。threshold: 0 适合判断刚刚接触视口，threshold: 0.5 表示可见比例跨过 50% 时通知。要观察多个阶段，可以传入 [0, 0.25, 0.5, 0.75, 1]。

这三个字段不要混用。尤其是 isIntersecting === true 并不等于元素已经展示了一半；它只说明交集状态成立。

用 threshold 数组做一个可复现的曝光实验

准备一个会跨过多个档位的目标卡片

下面的示例只观察一个列表卡片。把页面滚动到它从视口底部进入，再滚到完全可见，可以看到同一个观察器按比例档位收到通知。

const card = document.querySelector('.card');
const thresholds = [0, 0.5, 1];

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    console.log({
      isIntersecting: entry.isIntersecting,
      intersectionRatio: entry.intersectionRatio
    });
  }
}, { threshold: thresholds });

observer.observe(card);

检查点是控制台里的 intersectionRatio 会在滚动过程中接近 0、0.5、1，而回调参数里的 isIntersecting 只表达是否存在交集。实际值会受卡片尺寸、滚动速度和边界像素影响，不应把它当成严格的逐帧进度计。

首屏曝光为什么要用 Set 去重

如果需求是“每张卡片第一次达到 50% 可见时上报一次”，回调里还要有一个已上报集合。下面用卡片的 data-id 作为稳定键，离开视口后再次回来也不会重复上报。

const seen = new Set();
const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    const id = entry.target.dataset.id;
    if (entry.isIntersecting && entry.intersectionRatio >= 0.5 && !seen.has(id)) {
      seen.add(id);
      reportExposure(id);
    }
  }
}, { threshold: [0, 0.5] });

这里的顺序有意写得很直白：先确认有交集，再确认比例达到 0.5，最后检查 seen。上报成功后才加入集合；如果你的上报函数可能失败，应该在请求成功回调中写入 seen，否则网络失败也会被误记成已曝光。

档位怎么选，才不会把回调打得太碎

曝光统计通常只需要一个业务阈值，例如 0.5；只有需要展示“阅读进度”或分段动画时，才使用更密的数组。不要为了看起来精细而塞入从 0 到 1 的几十个数字，因为回调运行在主线程，回调里的日志、埋点和 DOM 操作都会放大成本。

• 一次曝光：threshold: 0.5，回调内配合 Set。
• 进入与离开：threshold: [0, 0.5]，分支看 isIntersecting。
• 可见比例阶段：使用少量递增档位，并只读取 intersectionRatio。

常见问题

threshold 写成 50 是不是表示 50%？

不是。threshold 使用 0 到 1 的比例，50% 应写成 0.5；写成 50 不符合这个 API 的比例语义。

为什么回调第一次 observe 就执行了？

观察器开始观察目标时会给出初始交集状态，这是设计行为。首屏曝光逻辑要结合比例和 Set，而不能把第一次回调直接当成有效曝光。

滚动很快时会不会漏掉某个 threshold？

不要把回调当成逐帧动画。它报告的是跨过阈值后的观察结果；如果业务要求连续进度，应采用更适合动画的方案，而不是无限增加 threshold。

把实验收回到生产代码

上线前只保留业务真正需要的档位，给每个目标提供稳定的 data-id，在 reportExposure 的成功边界处理去重，并在组件销毁时调用 observer.disconnect()。这样 threshold 负责触发，intersectionRatio 负责判断，Set 负责生命周期内的唯一性，三件事各自承担清晰职责。