如何正确向setTimeout的回调函数传递参数？

这个问题我之前也碰到过，其实核心原因很容易搞混——你现在写的setTimeout(myFunction(x),5000)里，myFunction(x)是直接执行函数并把返回值传给setTimeout，而不是把函数本身作为回调传递。这就是为什么它会立刻跑起来，根本不等5秒~

下面给你三种常用的正确写法，按需选择就行：

方法1：用匿名函数包裹回调 #

这是最通用的写法，灵活性很高，还能在回调里加额外逻辑：

var x = 1;
console.log("starting the script");
setTimeout(function() {
  // 这里可以加其他逻辑，比如对x做预处理
  myFunction(x);
}, 5000);

function myFunction(x) {
  console.log("执行回调，x的值是：", x);
}

这里setTimeout接收的是一个不会立即执行的匿名函数，等5秒后才会执行这个匿名函数，进而调用带参数的myFunction。

方法2：利用setTimeout的额外参数（ES5+支持） #

从ES5开始，setTimeout允许在延迟时间后面直接传递回调需要的参数，写法更简洁：

var x = 1;
console.log("starting the script");
// 第三个及以后的参数会作为回调函数的参数传入
setTimeout(myFunction, 5000, x);

function myFunction(x) {
  console.log("执行回调，x的值是：", x);
}

注意：如果需要兼容非常老的浏览器（比如IE9及以下），这种方法可能不适用。

方法3：用bind绑定参数 #

bind方法会创建一个新的函数，预先绑定好指定的参数，把这个新函数传给setTimeout即可：

var x = 1;
console.log("starting the script");
// 第一个参数是this指向（这里用null就行，因为回调里不需要this），后面是要绑定的参数
setTimeout(myFunction.bind(null, x), 5000);

function myFunction(x) {
  console.log("执行回调，x的值是：", x);
}

这种方法适合你需要多次复用这个带参数的回调函数的场景。

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