javascript - 如何使用 Intersection Observer 为不同的目标调用不同的函数？

Question

我在站点上使用 Intersection Observer API。对于使用它的每个实例，我都使用相同的配置（主视口）。我的问题是我需要在触发回调时发生不同的事情。对于某些人来说，我想延迟加载图像。对于某些人来说，我想初始化一个轮播等。

有没有办法为所有这些不同的应用程序使用相同的观察者，或者我必须为每个独特的回调使用不同的观察者？

Answer 1

您可以为所有不同的目标重用相同的交叉点观察者和相同的回调，因为回调提供了目标元素，您可以使用该信息来自定义回调的作用。

div在下面的示例中，我根据重用相同 IntersectionObserver 实例和相同回调函数的不同颜色来更改屏幕上的消息：

const message = document.getElementById('message');

function callbackRouter(entries, observer) {
  let entry = entries[0];
  let target = entry.target;
  if (entry.intersectionRatio > 0) {
    message.textContent = target.classList + " is in view!";
    if (target.dataset.callback) {
      window[target.dataset.callback](target);
    }
  }
}

function lazyLoadImage(target) {
    console.log('lazy load an image here');
}

function initCarousel(target) {
  console.log('initialize a carousel here');
}

function sendAsyncRequest(target) {
  console.log('send an async request here');
}

function doWhatever(target) {
  console.log('literally do whatever you want');
}

const observer = new IntersectionObserver(callbackRouter);
const boxes = document.querySelectorAll('.box');
boxes.forEach(observer.observe.bind(observer));

.box {
  height: 1000px;
}

.violet {
  background-color: violet;
}

.green {
  background-color: green;
}

.tomato {
  background-color: tomato;
}

.orange {
  background-color: orange;
}

#message {
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: white;
  height: auto;
  padding: 10px 20px;
}

<div class="tomato box" data-callback="lazyLoadImage"></div>
<div class="violet box" data-callback="initCarousel"></div>
<div class="orange box" data-callback="sendAsyncRequest"></div>
<div class="green box" data-callback="doWhatever"></div>
<div id="message"></div>