为什么未主动调用的JS外部函数会在页面加载时自动执行？

核心触发原因是你在代码中写了带执行括号的函数作为参数传递，代码解析到对应行时就会立刻执行函数，和你预期的“触发特定条件才执行”逻辑不符。

常见错误写法 #

所有把函数名()直接作为回调/参数传递的写法都会触发这个问题，典型场景包括：

• DOM事件绑定时直接加括号执行

// 错误：代码解析到这行就会立刻跑myFunc，不是点击按钮才触发
document.querySelector('.trigger-btn').addEventListener('click', myFunc())

• 前端框架模板内绑定事件直接加括号

// 错误：组件渲染阶段就会执行handleClick，不是点击触发
<button onClick={handleClick()}>点我</button>

• 定时器、Promise等异步回调位置直接加括号

// 错误：代码执行到这行立刻跑fetchData，不会等3秒延迟
setTimeout(fetchData(), 3000)

原理说明 #

JS语法中，函数名后紧跟()就代表立即执行该函数，此时你传递给方法的不是函数本身的引用，而是函数执行后的返回值。JS是逐行解析执行的，运行到需要传参的代码行时，会先计算出参数的具体值，自然就会提前把带括号的函数执行完。

修复方案 #

• 不需要给回调函数传参时，直接传函数名即可，不要加末尾的括号：

// 正确：传递函数引用，触发点击时才执行
document.querySelector('.trigger-btn').addEventListener('click', myFunc)

• 需要给回调函数传参时，在外层包一层匿名函数包裹逻辑，避免直接执行目标函数：

// 普通JS场景正确写法
document.querySelector('.trigger-btn').addEventListener('click', function() {
  myFunc(自定义参数)
})

// 框架场景正确写法
<button onClick={() => handleClick(自定义参数)}>点我</button>

// 异步场景正确写法
setTimeout(() => fetchData(自定义参数), 3000)

问题对应代码截图
补充说明截图

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