关于JavaScript中setTimeout参数传递与执行时机的疑问

这是个很常见的JavaScript异步执行误区，咱们一步步拆解问题根源，再给你解决办法：

问题核心：函数引用 vs 立即执行函数 #

你遇到的所有问题，本质都是搞混了「传递函数引用」和「立即执行函数」：当你在函数末尾加上()时，不是把函数本身传给setTimeout，而是立刻执行这个函数，把它的返回值传给了setTimeout。

咱们逐个分析你的示例：

1. 正常延迟执行的示例 #

setTimeout(function() { console.log("ok function called") },2000);

这里你传给setTimeout的是一个函数引用（没加()），所以setTimeout会在2000ms后调用这个函数，完全符合预期。

2. 正确传参的示例 #

setTimeout(function(params) { console.log("passed value is"+params) },2000,55);

没错，这是setTimeout官方支持的传参方式：第三个及以后的参数，会在延迟后作为回调函数的参数传入，2000ms后会正常打印passed value is55。

3. 函数立即执行的示例 #

setTimeout(function(params) { console.log("passed value is"+params) }(55),2000);

这里的function(params) {...}(55)是立即执行函数表达式（IIFE），代码执行到这一行时会立刻运行它，打印passed value is55；又因为这个函数没有返回值，最终传给setTimeout的是undefined，相当于没有有效回调，自然不会有延迟执行的动作。

4. 部分立即执行、部分延迟的示例 #

setTimeout(function(params) { console.log("passed value is "+params); return function(){ console.log(params) }; }(55),2000);

这个IIFE同样会立即执行：先打印passed value is 55，然后返回了一个内部函数。setTimeout拿到的是这个返回的内部函数，所以会在2000ms后执行它、打印55——这就是为什么只有返回的函数会延迟执行。

解决办法 #

想要延迟执行带参数的函数，有几种可靠的方式：

方式一：使用setTimeout自带的参数传递（推荐，现代浏览器支持） #

直接沿用你第二个示例的写法，把参数放在setTimeout的第三个及以后的位置：

setTimeout(function(params) {
  console.log("passed value is"+params);
}, 2000, 55);

方式二：用闭包包裹参数 #

如果需要更灵活的参数处理（比如参数需要提前计算），可以用闭包把参数包起来，传给setTimeout一个不带参数的函数：

const params = 55; // 可以是任意提前计算好的值
setTimeout(function() {
  console.log("passed value is"+params);
}, 2000);

// 用箭头函数更简洁：
setTimeout(() => console.log("passed value is"+params), 2000);

方式三：用bind绑定参数（兼容老环境） #

如果需要兼容IE9及更早的浏览器（这些浏览器不支持setTimeout的多参数写法），可以用Function.prototype.bind来绑定参数：

setTimeout(function(params) {
  console.log("passed value is"+params);
}.bind(null, 55), 2000);

bind会返回一个新函数，把55作为第一个参数绑定进去，延迟后执行这个新函数时，就会自动传入55。

总结 #

记住关键规则：传给setTimeout的必须是函数引用（不要加()），加了()就会立即执行函数，而不是把它交给setTimeout去延迟调用。

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