如何判断元素是否已被IntersectionObserver观察？

原生的IntersectionObserver并没有提供直接的API来查询某个元素是否正在被观察，所以我们需要手动维护一个已观察元素的追踪集合，来实现你要的「未被观察时再执行观察」的逻辑。

实现思路 #

• 用Set存储当前观察实例已盯上的元素，Set的查询、增删操作效率都很高
• 封装一个安全的观察方法，先检查元素是否在Set中，不在的话再调用observe并将元素加入Set
• 如果有取消观察的需求，同步更新这个Set即可

完整代码示例 #

// 初始化Set用于追踪已观察元素
const trackedElements = new Set();
// 创建你的IntersectionObserver实例
const observer = new IntersectionObserver((entries) => {
  // 这里写交叉观察的回调逻辑
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入视口', entry.target);
    }
  });
});

// 封装安全的观察方法
function observeIfNotTracked(element) {
  if (!trackedElements.has(element)) {
    observer.observe(element);
    trackedElements.add(element);
  }
}

// 封装对应的取消观察方法（按需使用）
function unobserveAndUntrack(element) {
  observer.unobserve(element);
  trackedElements.delete(element);
}

// 使用示例
const targetEl = document.getElementById('target');
observeIfNotTracked(targetEl);

注意事项 #

• 当元素被移除DOM或者不再需要观察时，务必调用unobserveAndUntrack，避免内存泄漏
• 如果有多个IntersectionObserver实例，要给每个实例单独维护对应的追踪Set，不要混用

内容的提问来源于stack exchange，提问作者oldboy