JavaScript – 检测元素是否在视口(viewport)中停留 n 秒

Question

每当某个 css 类的内容 block 可见 5 秒(用户正在阅读内容的标志)时，我需要推送一个数据层事件。

我用过这样的东西:

$(window).on(‘scroll resize’, function() {
  $(‘.myClass’).each(function(element) {
    If (isInViewport(element)) {
      setTimeout(function() {
        if (isInViewport(element)) {
          ... // Push the data layer event.
        }
      }, 5000);
    }
  });
});

function isInViewport(element) {
  ... // Returns true if element is visible.
};

只是凭内存写的，所以它可能不是 100% 正确，但要点是我尝试:

1. 在滚动/调整大小时测试每个 myClass 元素的可见性
2. 如果一个元素可见，请等待 5 秒并再次检查同一元素。

问题是，当 setTimeout 运行 isInViewport 时，元素是未定义的。也许 jQuery 的 .each 和 setTimeout 不匹配？

Answer 1

我设法使用路口观察器做到了这一点。我的要求是检查该元素是否至少在一秒钟内占 50%，如果是，则触发一个事件。

let timer;

const config = {
    root: null,
    threshold: 0.5 // This was the element being 50% in view (my requirements)
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {

        if (entry.isIntersecting) {
            timer = setTimeout(() => {
               //... push to data layer
            }, 1000);
        } else {
            clearTimeout(timer);
        }
    });
}, config);

observer.observe(YourElement);