GSAP ScrollTrigger传参时函数未进入视口即提前执行问题

传参后函数立即执行是JS回调绑定的通用规则导致的：

• 直接写onEnter: function write() { ... }时，赋值给onEnter的是函数引用，ScrollTrigger会在滚动到触发位置时才调用该函数，符合预期。
• 写onEnter: hello(".git-go-method-render",".git-go-method-head")时，JS在解析配置对象阶段就会立刻执行hello()函数，把函数的返回值（即Typed实例）赋值给onEnter，完全绕过了ScrollTrigger的触发判断，页面加载完成就会执行。

只要在绑定回调的位置给函数名加了()执行括号，JS就会当场运行函数，不会等待触发时机，和setTimeout、DOM事件绑定等场景的回调传参逻辑完全一致。

将带参数的函数调用包裹在匿名函数中，保证onEnter拿到的是可延迟执行的函数引用，触发滚动条件时才会执行内部逻辑：

gsap.to(".git-go-method-render",{
    scrollTrigger:{
        trigger:".git-go-method-render",
        start:"-200 center",
        once:true,
        markers:true,
        onEnter: () => {
            hello(".git-go-method-render",".git-go-method-head")
        }
    }
})

function hello(render,holder){
    new Typed(render,{
        stringsElement: holder,
        typeSpeed:30,
        cursorChar: "_",
        loop:false,
        onComplete: function(self) { 
            self.cursor.remove() 
            console.log("function is launched")
        }
    })   
}

也可以用bind方法预绑定参数，效果完全相同：

onEnter: hello.bind(null, ".git-go-method-render", ".git-go-method-head")

原hello函数不需要返回Typed实例，直接执行实例化逻辑即可。

完整可运行代码 #

CSS部分 #

h1{
  font-size:10rem;
  text-align:center;
}

.spacer{
  width: 100%;
  height: 400px;
}
h2{
  font-size:4rem;
  font-family:arial;
  text-align:center;
  margin-bottom: 500px;
}

HTML部分 #

<!-- Typed JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

<!-- GSAP Animation CDN Links -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>


<h1>Scroll</h1>
<div class="spacer"></div>

<div class="git-go-method-head">
  <p>Hello! How are you?</p>
</div>

<h2>
  <span class="git-go-method-render"></span>
</h2>

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