我们如何在交集观察者中指定一个元素应该保持在视口中的时间?

Question

我使用的是Intersection Observer API在react中检测一个元素进入视口。但我也希望元素应该保持在视口至少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);
}
};
}, []);

Answer 1

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);
}
};
}, []);