Question

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

是否可以对所有这些不同的应用程序使用相同的观察者，或者对于每个唯一的回调都必须使用不同的观察者？

Answer 1

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

在下面的示例中，我根据视图中使用哪种颜色不同的removedWord = removedWord.substring(0, removedWord.indexOf(" ")) + " " + firstWord.toLowerCase() + removedWord.substring(removedWord.indexOf(" ") + 1, removedWord.length()); String newSentence = removedWord.substring(0,1).toUpperCase() + removedWord.substring(1, removedWord.length());来更改屏幕上的消息，从而重新使用相同的IntersectionObserver实例和相同的回调函数：

Is running fun

div

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));

使用Intersection Observer API针对不同目标的不同回调

1 个答案: