如何实现JS元素进入视口时仅触发一次操作（避免重复触发）

基础实现方案 #

你可以通过添加状态标记变量记录元素是否已触发过打印逻辑，避免重复执行：

// 初始化标记，默认未触发
let hasTriggered = false;
// 替换为你实际要检测的DOM元素
const element = document.querySelector('#target-element');

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

window.addEventListener("scroll", function() {
  // 仅当元素在视口内且未触发过时执行
  if (isInViewport(element) && !hasTriggered) {
    console.log('test');
    // 触发后标记为已执行
    hasTriggered = true;
    // 可选：若无需继续监听滚动，可移除事件监听
    // window.removeEventListener("scroll", this);
  }
});

更高效的方案：使用Intersection Observer API #

滚动监听会频繁触发函数，性能表现一般。推荐使用浏览器原生的Intersection Observer API，它专门用于监听元素视口状态，性能更优，且天然支持单次触发需求：

const element = document.querySelector('#target-element');

const observer = new IntersectionObserver((entries) => {
  const entry = entries[0];
  // 当元素进入视口时执行
  if (entry.isIntersecting) {
    console.log('test');
    // 执行后立即停止监听该元素
    observer.unobserve(element);
  }
}, {
  // 可选配置：threshold设为1.0表示元素完全进入视口才触发，默认0（元素刚进入一点就触发）
  threshold: 1.0
});

// 开始监听目标元素
observer.observe(element);

内容的提问来源于stack exchange，提问作者Julio