如何实现元素#checkPosition到达窗口顶部时仅调用一次myFunction？

嗨，这个问题我碰到过好多次了，其实解决思路很清晰——就是给函数加个「已执行」的标记，或者用更现代的API来监听元素进入视口，下面给你两种靠谱的实现方式：

这种方法的核心就是用一个布尔变量记录函数是否已经执行过，当满足触发条件时，先检查这个变量，避免重复调用。

// 初始化一个标记，记录函数是否已经执行过
let hasTriggered = false;

$(window).scroll(function() {
  const totalScroll = $(window).scrollTop();
  const indicatorPosition = $('#checkPosition').offset().top;
  
  // 如果已经触发过，直接跳过后续逻辑
  if (hasTriggered) return;
  
  // 当滚动距离达到元素顶部位置时
  if (totalScroll >= indicatorPosition) {
    myFunction();
    // 标记为已触发，防止再次执行
    hasTriggered = true;
    
    // 额外优化：如果之后不需要监听滚动事件了，可以直接解绑，节省性能
    // $(window).off('scroll');
  }
});

function myFunction() {
  console.log('这个函数只会被调用一次！');
}

这个方案兼容性很好，不管是新老浏览器都能跑，而且逻辑一目了然，容易维护。

如果你的项目不需要兼容IE这类旧浏览器，非常推荐用这个API——它是浏览器原生提供的专门用来检测元素是否进入视口的工具，比监听scroll事件自己计算距离要高效得多，代码也更简洁。

const targetElement = document.getElementById('checkPosition');
let hasTriggered = false;

// 创建观察者实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 当元素顶部到达视口顶部，且还未触发过函数时
    if (entry.isIntersecting && !hasTriggered) {
      myFunction();
      hasTriggered = true;
      // 执行完后停止观察该元素，节省浏览器资源
      observer.unobserve(targetElement);
    }
  });
}, {
  // 配置项：设置rootMargin让元素顶部与视口顶部对齐时触发
  rootMargin: '0px 0px -100% 0px',
  threshold: 0
});

// 开始观察目标元素
observer.observe(targetElement);

function myFunction() {
  console.log('这个函数只会被调用一次！');
}

这里的rootMargin: '0px 0px -100% 0px'是关键配置，它相当于把视口的底部向上拉了100%，只有当元素的顶部刚好碰到视口顶部时，才会触发回调。执行完函数后调用unobserve停止观察，避免后续不必要的检测。

内容的提问来源于stack exchange，提问作者miss.emenems