Question

我正在使用Intersection Observer API，我想知道：

如何去抖动或限制Intersection Observer API？

如果我想提高性能，建议使用防抖功能或油门功能吗？

Answer 1

通常，观察者（不仅是路口观察者，而且是突变观察者，...）都由浏览器处理。意味着浏览器决定何时执行观察者。

这就是为什么您仅定义阈值，并且根据负载，它们或多或少准确的原因。例如，当您在“相交观察器”上为20％定义阈值时，该阈值可能以20.6％的速度执行。那是因为浏览器会自动反跳功能（在这里延迟可能是个更好的词），并且仅在有足够的资源执行该功能时才执行该功能。

所有其他观察者也是如此。

Answer 2

我想首先说Intersection Observer API 已经非常高效，并且提供了多种配置来根据需要使回调或多或少地发生，避免了不必要的消除或限制其调用。

话虽如此，我们需要了解配置的 threshold 属性是如何工作的。 threshold 来自 0 和 1 之间的任何数字，它接受数字或数字数组。所以以下所有 options 都是有效的：

const sneakPeekOptions = {threshold: 0};
const fullOptions = {threshold: 1};
const progressiveOptions = {threshold: [0, .25, .5, .75, 1]};

为了更好地理解 threshold，可以将这些值乘以 100，结果将告诉我们将触发回调的目标的可见性百分比。这意味着：

// When 0% is visible
const sneakPeekOptions = {threshold: 0};

// When 100% is visible
const fullOptions = {threshold: 1};

// When 0%, 25%, 50%, 75% and 100% is visible
const progressiveOptions = {threshold: [0, .25, .5, .75, 1]};

因此对于 sneakPeekOptions 和 fullOptions 很明显，这只会在用户滚动时发生一次，所以让我们关注 progressiveOptions 一个。

现在我们必须添加另一个变量，它是被观察元素的高度（或宽度？它取决于滚动方向，所以现在让我们关注高度和垂直滚动）。让我们提出两个节点元素：

<head>
  .
  .
  .
  <style>
    .small-target { height: 4px }
    .large-target { height: 100px }
  </style>
</head>
<body>
  . // More elements creating scroll
  .
  .
  <div class="small-target></div>
  <div class="large-target></div>
  .
  .
  . // More elements creating scroll
</body>

这两个元素 .small-target 和 .large-target 的高度分别为 4px 和 100px。所以现在让我们执行以下 JS 行：

const smallTarget = document.querySelector('.small-target');
const largeTarget = document.querySelector('.large-target');

const progressiveOptions = {threshold: [0, .25, .5, .75, 1]};
const callback = (e, o) => {}; // To be called on each threshold.

const observer = new IntersectionObserver(callback, progressiveOptions);

observer.observe(smallTarget);
observer.observe(largeTarget);

如上所示，我们正在配置一个具有阈值数组的观察者，以观察具有不同高度的两个元素。现在，考虑到用户以每秒 1 像素的速度滚动（假设这是可能的），对 callback 函数的调用频率将根据元素的高度发生巨大变化：

呼吁smallTarget

在这种情况下，callback 函数每秒将被调用 1 次，这意味着它将在 4 秒后总共调用 5 次：

在 0px 调用一次 – 0 秒 – 开始
1px 调用一次 – 1 秒 – 滚动
在 2px 处调用一次 – 2 秒 – 滚动
在 3px 处调用一次 – 3 秒 – 滚动
在 4px 处调用一次 – 4 秒 – 结束

呼吁largeTarget

现在，在这种情况下，callback 函数将每 25 秒被调用 1 次，这意味着它在 100 秒后总共将有 5 次调用：

在 0px 调用一次 – 0 秒 – 开始
在 25 像素处调用一次 – 25 秒 – 滚动
在 50 像素处调用一次 – 50 秒 – 滚动
在 75 像素处调用一次 – 75 秒 – 滚动
100px 的一次通话 – 100 秒 – 结束

我认为这是描绘同一个观察者如何根据被观察组件的高度或多或少地执行调用的好方法。

如何消除或阻止交叉口观察器？

2 个答案: