我们如何在 Intersection Observer 中指定元素应保留在视口上的时间答案

【问题标题】：How can we specify the time upto which an element should remain on viewport in Intersection Observer我们如何在 Intersection Observer 中指定元素应保留在视口上的时间
【发布时间】：2022-09-23 23:19:57
【问题描述】：

我在用交叉口观察者 API对检测到视口上的元素做出反应。但我也希望元素应在视口上保持至少 3 秒，然后在此之后检测到。我该怎么做？下面给出的是我正在使用的代码。

    const callBack = (entries) => {
    const [entry] = entries;
    if (entry.isIntersecting) {
      console.log(\"intersecting\");
    }
  };

  const options = {
    root: null,
    rootMargin: \"0px\",
    threshold: 0.75,
  };

  useEffect(() => {
    const observer = new IntersectionObserver(callBack, options);
    if (cardRef.current) {
      observer.observe(cardRef.current);
    }
    return () => {
      if (cardRef.current) {
        observer.unobserve(cardRef.current);
      }
    };
  }, []);

标签： reactjs user-interface frontend intersection-observer react-intersection-observer

【解决方案1】：

Не уверен что это решение правильно оформлено для работы с 反应。 Возможно при работе с react Вы будите записывать id в другое место не в свойства элемента, данное решение призвано продемонстрировать принцип реализации такой задержки)

const callBack = (entries) => {
const [entry] = entries; //объект текущего пересечения элемента

//если пересечение началось и элемент entry.target входит в root
if (entry.isIntersecting) {
    //создаём таймер с ууказанием нужной задержки перед срабатыванием
    let id = setTimeout(() => {
        console.log("intersecting");
    }, 3000);

    entry.target.start_intersecting_timeout_id = id; //в свойства start_intersecting_timeout_id нашего entry.target элемента записываем id этого таймера
}
//если пересечение началось и элемент entry.target входит в root

//если пересечение началось и элемент entry.target покидает root, или при первом старте не находится в root
else {
    //если у нашего entry.target есть свойство start_intersecting_timeout_id
    if (entry.target.start_intersecting_timeout_id) {
        clearTimeout(entry.target.start_intersecting_timeout_id); //удаляем этот таймаут
        delete entry.target.start_intersecting_timeout_id; //удаляем свойство
    }
}
//если пересечение началось и элемент entry.target покидает root, или при первом старте не находится в root
  }

  const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.75,
  }

  useEffect(() => {
      const observer = new IntersectionObserver(callBack, options);
      if (cardRef.current) {
          observer.observe(cardRef.current);
      }
      return () => {
          if (cardRef.current) {
              observer.unobserve(cardRef.current);
          }
      };
  }, []);

【讨论】：

Извиняюсь за форматирование кода в ответе, первый раз размещаю комментарий на этом ресурсе, ещё не совсем раодмещелся не