如何为Vue3中的Intersection Observer添加防抖延迟？

问题背景 #

在Vue3中使用Intersection Observer通过v-if控制组件渲染，当组件进入视口时才挂载。但面对700多行数据，快速上下滚动时，大量组件的isIntersecting状态会被频繁触发，导致页面卡顿。需要给状态更新添加约100ms的防抖，避免快速滚动时的无效渲染。

解决方案：给Intersection Observer回调添加防抖 #

核心思路是批量延迟处理交叉状态更新，避免每次滚动时立刻更新所有条目。防抖函数会合并一段时间内的所有交叉事件，只执行一次批量更新，减少响应式数据的频繁修改带来的重渲染开销。

1. 实现轻量防抖函数

无需引入第三方库，自己实现一个基础防抖工具：

const debounce = (fn, delay) => {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
};

2. 改造Intersection Observer回调

将原本的即时更新逻辑包裹在防抖函数中，同时通过Map去重，确保每个元素只保留最新的交叉状态：

// 防抖后的批量更新函数，延迟100ms执行
const handleIntersectionUpdates = debounce((entries) => {
  const updateMap = new Map();

  // 收集所有需要更新的元素状态，去重并保留最新状态
  entries.forEach(entry => {
    // 用唯一key标识每个评分项
    const uniqueKey = `${entry.target.dataset.meeting}-${entry.target.dataset.lessongroup}-${entry.target.dataset.rating}`;
    updateMap.set(uniqueKey, {
      meetingIdx: entry.target.dataset.meeting,
      groupIdx: entry.target.dataset.lessongroup,
      ratingIdx: entry.target.dataset.rating,
      isActive: entry.isIntersecting
    });
  });

  // 批量更新响应式数据，减少Vue的响应式触发次数
  updateMap.forEach(item => {
    meetings.value[item.meetingIdx].lessongroups[item.groupIdx].ratings[item.ratingIdx].isActive = item.isActive;
  });
}, 100);

// 创建Observer实例，直接传入防抖后的处理函数
const observer = new IntersectionObserver(
  (entries) => handleIntersectionUpdates(entries),
  {
    rootMargin: "1000px", // 可根据实际需求调整，缩小值能减少提前触发的元素数量
  }
);

3. 额外优化建议

• 异步加载组件：将StudentSingleRatingV2改为异步组件，减少初始挂载时的性能开销：

  import { defineAsyncComponent } from 'vue';
  const StudentSingleRatingV2 = defineAsyncComponent(() => import('./StudentSingleRatingV2.vue'));
  

• 调整rootMargin：如果不需要提前那么多渲染，可将rootMargin从1000px调小（比如500px），减少进入观察范围的元素数量，降低更新压力。
• 保留固定高度占位符：当前的v-else固定高度占位符能保证滚动位置稳定，避免滚动跳变，建议保留。

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