Javascript 当HTML元素出现在用户屏幕上时，将其添加到HTML元素中

我想在HTML元素出现在用户屏幕上时，仅使用Javascript或React组件（而不是jQuery）向HTML元素添加一个事件

我正在使用react组件，我想运行

setInterval（）

函数 使用state创建一个简单的计数器，但问题是代码会运行 当呈现页面时，我只想在元素 在屏幕上显示

---

我不认为通过向元素本身添加事件就可以实现这一点。我认为您必须为任何可能更改视图中元素（加载、滚动、调整大小）的事件向窗口添加侦听器

我从你那里借了IsCrolledinToView（）

//根据需要获取元素
让myElement=document.getElementById（'myElement'）；
//循环浏览可能会使元素进入视图的事件
['resize'、'scroll'、'load'].forEach（eventName=>{
addEventListener（事件名称，事件=>{
如果（isScrolledIntoView（myElmement））{
做你的事；
}否则{
console.log（'nope'）；
}
});
});
//借来https://stackoverflow.com/a/22480938/12771340
函数为CrolledinToView（el）{
设rect=el.getBoundingClientRect（）；
设elemTop=rect.top；
设elemBottom=rect.bottom；
//只有完全可见的元素返回true：
设isVisible=（elemTop>=0）和&（elemBottom=0；
返回是可见的；
}

使用交叉口观察者并在回调中设置间隔：

let isIntersected = false;

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    let count = 0;
    if (entry.intersectionRatio > 0 && !isIntersected) {
      isIntersected = true;
      setInterval(() => {
        document.querySelector("#counter").innerText = count;
        count++;
      }, 1000);
    }
  });
});

observer.observe(document.querySelector('.counter-container'))

一个不是很优化的例子：

---

“添加元素时检测javascript”变成什么？你能详细解释一下你尝试过的方法吗？这样我们就可以帮助你了。你想知道不在视口中的元素何时进入视口，因为页面被滚动或调整了大小吗？到目前为止你尝试了什么？请将此添加到你的问题中。我正在使用react组件，我想运行setInterval（）函数使用state生成一个简单的计数器，但问题是代码在呈现页面时运行，我只想在元素出现在屏幕上时启动代码。@UthistranSelvaraj

function isUserCanSeeIt(elemClassName,elemNumber){
    var elem = document.getElementsByClassName(elemClassName)[elemNumber];
    var elemPos = elem.getBoundingClientRect();
    if(elemPos.top > 0){
        return true;
    }
    else return false;
}
function event(elemClassName,elemNumber){
    if(isUserCanSeeIt(elemClassName)){
        doSomething();
    }
}
event("someClassName",0);

let isIntersected = false;

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    let count = 0;
    if (entry.intersectionRatio > 0 && !isIntersected) {
      isIntersected = true;
      setInterval(() => {
        document.querySelector("#counter").innerText = count;
        count++;
      }, 1000);
    }
  });
});

observer.observe(document.querySelector('.counter-container'))