对于性能animationFrame或onScroll有什么更好的？

Question

我有一个用react创建的选取框元素。我希望字幕在元素不可见时停止。

这是我用于检查可见性的代码：

const isVisible = () => {
  const rect = marqueeRef.current.getBoundingClientRect();
  const elTop = rect.top;
  const elBottom = rect.bottom;
  const visible = elTop < wHeight && elBottom >= 0;
  return visible;
};

我想知道什么对性能会更好：

a。让动画帧运行并每次检查该元素是否可见。

const animate = () => {
  if (isVisible()) {
    i = i < width ? i + step : 0;
    marqueeRef.current.style.transform = `translateX(${-i}px)`;
  }
  aF = requestAnimationFrame(animate);
};

或

b。创建一个onScroll处理程序，以检查该元素是否可见，然后启动和停止动画帧。

const onScroll = () => {
  if(isVisible()){
    animate();
  }else{
    cancelAnimationFrame(aF);
  }
}

这两种方法都会不断检查该元素是否可见，所以我想知道是否有人对此有任何经验，并可能会从中发现更好的性能。

谢谢。

Answer 1

Intersection observer API非常适合此。它比这两个选项中的任何一个都有更好的性能，因为它仅在元素变为可见或不可见时（取决于给定的阈值）才调用您的回调，并且具有相对简单的启动API。