如何用jQuery实现元素滚动到视图时仅触发一次事件？

针对你的需求，有几种简单可靠的方法可以让代码只触发一次，避免重复执行加载地图的操作，下面分别介绍：

方法1：使用状态标记变量 #

最直观的方式是添加一个布尔变量，标记是否已经执行过加载操作，只有当未加载过且元素进入视图时才执行代码：

// 初始化标记，默认未加载
let hasLoadedMap = false;

$(window).scroll(function(){
  const scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        elemTop = $('#coverage-area-load-trigger').offset().top,
        triggerPoint = elemTop - windowHeight,
        distanceToTrigger = triggerPoint - scrollTop;

  // 只有当元素进入视图且未加载过时才执行
  if(distanceToTrigger < 0 && !hasLoadedMap){
    hasLoadedMap = true; // 标记为已加载，避免重复触发
    // 替换为你的地图加载逻辑
    $('#coverage-area').attr('src', 'https://www.google.com/maps/...');
  }
});

方法2：触发后解绑滚动事件 #

另一种思路是，当满足条件执行加载后，直接移除滚动事件的监听函数，这样后续滚动就不会再触发这段代码：

// 给滚动处理函数命名，方便后续解绑
function handleScrollForMap(){
  const scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        elemTop = $('#coverage-area-load-trigger').offset().top,
        triggerPoint = elemTop - windowHeight,
        distanceToTrigger = triggerPoint - scrollTop;

  if(distanceToTrigger < 0){
    $(window).off('scroll', handleScrollForMap); // 解绑当前监听函数
    // 加载地图
    $('#coverage-area').attr('src', 'https://www.google.com/maps/...');
  }
}

// 绑定滚动事件
$(window).scroll(handleScrollForMap);

方法3：使用Intersection Observer（推荐） #

这是现代浏览器提供的专门用于检测元素是否进入视口的API，性能比监听scroll事件更好，代码也更简洁，而且天然支持只触发一次：

const triggerElement = document.getElementById('coverage-area-load-trigger');
const mapElement = document.getElementById('coverage-area');

// 创建观察者实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 当元素进入视口时
    if(entry.isIntersecting){
      // 加载地图
      mapElement.src = 'https://www.google.com/maps/...';
      // 停止观察该元素，确保只触发一次
      observer.unobserve(triggerElement);
    }
  });
});

// 开始观察触发元素
observer.observe(triggerElement);

为什么推荐Intersection Observer？ #

• 不需要手动计算滚动位置和元素偏移，浏览器自动处理
• 性能更优，不会像scroll事件那样频繁触发回调
• 支持更灵活的触发条件（比如元素进入视口的比例）

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