求助：如何实现window scroll事件仅触发一次打字机效果函数

我来帮你搞定这个问题！你现在的核心困扰是scroll事件会频繁触发，导致打字机函数反复执行，文本被重复打印。下面给你三种实用的解决方案，从简单到更现代的都有：

方法一：用标志位控制执行次数 #

最直观的方式就是加一个布尔变量，标记函数是否已经执行过，每次触发scroll事件时先检查这个变量：

// 初始化标志位，默认未执行
let hasTyped = false;

$(window).on('scroll', function () {
  // 如果已经执行过打字机效果，直接退出
  if (hasTyped) return;

  // 你的原有滚动判断逻辑
  if ($(window).scrollTop() >= $('#anchor-form').offset().top - $(window).height() / 2) {
    // 这里放你的打字机效果代码
    // 比如：typeWriterEffect();
    
    // 执行完成后，把标志位设为true，阻止后续触发
    hasTyped = true;
  }
});

原理很简单：第一次满足滚动条件时执行打字机代码，之后把hasTyped设为true，后续所有scroll事件触发时都会直接跳过，不会再重复执行。

方法二：触发后解绑scroll事件 #

另一种思路是，一旦满足条件并执行完打字机效果，就直接移除scroll事件的监听，彻底切断后续触发的可能：

// 把回调抽成命名函数，方便后续解绑
function handleScrollTrigger() {
  if ($(window).scrollTop() >= $('#anchor-form').offset().top - $(window).height() / 2) {
    // 执行你的打字机效果
    // typeWriterEffect();
    
    // 解绑当前的scroll事件监听，后续滚动不会再触发这个函数
    $(window).off('scroll', handleScrollTrigger);
  }
}

// 绑定scroll事件
$(window).on('scroll', handleScrollTrigger);

这种方法的好处是不会在后续scroll事件中做多余的判断，性能更优，而且不会影响页面上其他可能存在的scroll事件监听。

方法三：用Intersection Observer（推荐） #

这是浏览器原生提供的更现代、更高效的方案，专门用来监听元素是否进入视口，不需要频繁监听scroll事件：

// 获取你要监听的锚点元素
const targetElement = document.querySelector('#anchor-form');

// 创建观察者实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 当元素进入视口时触发
    if (entry.isIntersecting) {
      // 执行打字机效果
      // typeWriterEffect();
      
      // 只执行一次，所以执行后停止观察该元素
      observer.unobserve(targetElement);
    }
  });
}, {
  // 配置：当元素进入视口的一半时触发（和你原来的offset逻辑一致）
  rootMargin: '0px 0px -50% 0px'
});

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

这个API的优势非常明显：它不会像scroll事件那样频繁触发回调，只有当元素可见性变化时才会执行，性能更好；而且逻辑更清晰，通过unobserve就能轻松实现只执行一次的需求，不需要自己管理额外的变量。

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