初次认识IntersectionObserver

骑单车的小恐龙_flush2024-11-28 15:19

先说一下需求，页面上有展示区域，与很多卡片组成（见下草图），每一个卡片都需要根据当前的时间跑计时器来累加时间。就在想如果卡片有很多的话页面不得卡死？那是否可以就在可视区域跑计时器，这样肯定会好很多。于是认识了IntersectionObserver,记录一下第一次使用。

new IntersectionObserver 接收一个回调函数与一个配置对象

callback: 一个函数，当目标元素的可见性发生变化时被调用。这个函数接收两个参数：
- entries: 一个 IntersectionObserverEntry 对象的数组，每个对象包含一个目标元素的信息。
- observer: 当前的 IntersectionObserver 实例。
options: 一个配置对象，包含以下属性：
- root: 指定一个元素作为根元素，默认为 null，表示使用浏览器的视口。
- rootMargin: 为根元素的边界增加额外的边距，格式为 "top right bottom left"，单位可以是像素或百分比。
- threshold: 一个或多个值，表示目标元素与根元素相交的比例。当相交比例达到这些阈值时，会触发回调。可以是一个数值或一个数值数组。

js 复制代码

initIntersectionObserver() {
      const options = {
        root: this.$parent.$el, // 默认浏览器的视口作为根元素，这里我使用的是父元素
        rootMargin: "0px", // 不增加额外的边距
        threshold: 0.5, // 当元素至少有 50% 在视口内时触发回调
      };
      this.observer = new IntersectionObserver(
        this.handleIntersection,
        options
      );
      this.observer.observe(this.$refs.cardItem);
    },
    handleIntersection(entries, observer) {
      entries.forEach((entry) => {
        //   判断元素是否在可视区域
        if (entry.isIntersecting) {
          this.startTimer();
        } else {
          this.stopTimer();
        }
      });
    },

卡片组件完整js代码 --> cardsItem.vue