用 set 配合 intersectionobserver 追踪视口内活跃业务组件 id,通过 add/delete 实时映射进入/离开状态,实现去重、快速查存与免重复监听;初始化 set 于 page/component 作用域,用 createintersectionobserver 监听,以 dataset 提取 id 并依据 intersectionratio 更新;后续按需消费 array.from(activeids) 进行曝光上报或联动;销毁时调用 disconnect() 防泄漏。

用 Set 配合 IntersectionObserver 追踪视口内活跃的业务组件 ID,核心在于把“进入视口”和“离开视口”的状态变化,实时映射为 Set 的 add 和 delete 操作。这样能天然去重、支持快速查存、避免重复监听,特别适合商品卡片、广告位、内容模块等需动态统计曝光或控制行为的场景。
初始化一个干净的 Set 并绑定观察器
在页面或组件的 onReady 阶段创建 Set,并确保 IntersectionObserver 实例与当前上下文绑定(推荐用 this.createIntersectionObserver()):
- 定义
const activeIds = new Set(),放在 data 外、Page/Component 作用域内(如 Page 构造函数顶部) - 调用
this.createIntersectionObserver(),并链式调用.relativeToViewport()(最常用) - 确保目标节点有唯一且稳定的
id或通过dataset携带业务 ID(如data-item-id="prod-1024")
在 observe 回调中精准更新 Set
回调里不直接操作 DOM 或触发业务逻辑,只做 ID 状态同步:
- 从
res.dataset.itemId或res.id提取业务 ID(优先用 dataset,更可控) - 若
res.intersectionRatio > 0(或按需设阈值如 0.1),执行activeIds.add(id) - 若
res.intersectionRatio === 0,执行activeIds.delete(id) - 避免用
isIntersecting判断——它在部分小程序基础库版本中存在兼容性偏差,intersectionRatio更稳定
按需消费活跃 ID 集合
Set 更新后,可在合适时机读取当前视口内所有 ID,用于后续处理:
- 定时轮询(如每 500ms):用
Array.from(activeIds)转为数组,做曝光上报或状态同步 - 响应式联动:配合
watchEffect(Vue)或useEffect(React)监听 Set.size 变化 - 防抖上报:当 Set 内容变化时,延迟 300ms 后批量发送
Array.from(activeIds)到埋点服务 - 注意:不要在 observe 回调内直接发起网络请求或复杂计算,保持回调轻量
销毁时清理资源与引用
防止内存泄漏和误触发:
- 在 onUnload(Page)或 detached(Component)中调用
observer.disconnect() - 可选:清空 Set(
activeIds.clear()),尤其当该 Set 被多个生命周期共用时 - 不建议将 Set 存在
this.data中频繁 setData——Set 本身不可响应,应仅作状态缓存










