IntersectionObserver不止懒加载

之前一直用老方案，最近换了新方法确实方便不少。对比一下两种做法，给还在犹豫的朋友一个参考。

先搞清楚原理

IntersectionObserver的基本概念其实不复杂。关键在于理解事件处理这个环节。看下面这段代码，逻辑就很清楚了：

class AnimationHelper {
  static animate(element, keyframes, duration = 300) {
    return element.animate(keyframes, {
      duration,
      easing: 'ease-out',
      fill: 'forwards',
    });
  }

  static fadeIn(element) {
    return this.animate(element, [
      { opacity: 0, transform: 'translateY(8px)' },
      { opacity: 1, transform: 'translateY(0)' },
    ]);
  }

  static fadeOut(element) {
    return this.animate(element, [
      { opacity: 1, transform: 'translateY(0)' },
      { opacity: 0, transform: 'translateY(-8px)' },
    ]);
  }

  static stagger(elements, delay = 50) {
    elements.forEach((el, i) => {
      setTimeout(() => this.fadeIn(el), i * delay);
    });
  }
}

实际怎么用

实际用的时候有几个注意点。首先是配置问题，不同环境参数可能不一样。其次是性能，数据量大的时候要注意事件处理。看这段实际运行的代码：

class ApiClient {
  #baseUrl;
  constructor(baseUrl) { this.#baseUrl = baseUrl; }

  async request(method, path, data = null) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 37000);
    try {
      const config = { method, headers: { 'Content-Type': 'application/json' }, signal: controller.signal };
      if (data && method !== 'GET') config.body = JSON.stringify(data);
      const response = await fetch(`${this.#baseUrl}${path}`, config);
      clearTimeout(timeoutId);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return await response.json();
    } catch (err) {
      clearTimeout(timeoutId);
      throw err;
    }
  }

  get(path) { return this.request('GET', path); }
  post(path, data) { return this.request('POST', path, data); }
}

进阶一点的用法

有些场景下IntersectionObserver的常规写法不够用，需要做事件处理。这个改动涉及的地方不多，但要注意顺序：

容易踩的坑

用IntersectionObserver的时候有几个常见的错误写法。比如事件处理没有正确处理，或者DOM操作与事件响应的顺序搞反了。下面列出几个典型问题和修复方式。

写在最后

整体来看，IntersectionObserver用起来不算复杂，关键是理解DOM操作与事件响应这个核心机制。建议先跑通基础示例，再逐步加功能。有问题可以看官方文档，社区也比较活跃。