JavaScript 定时器传递参数的几种实现方式

定时器参数传递问题

在使用 window.setTimeout 或 window.setInterval 时，若直接传入函数名作为回调句柄，默认无法传递参数。然而在实际开发中，经常需要向定时器回调函数传递特定参数，因此需要寻找合适的解决方案。

假设存在一个名为 hello(_name) 的函数，其功能是根据传入的用户名显示欢迎信息。

 
var userName="Tony";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
} 

此时，如果尝试使用以下语句让 hello 函数延迟 3 秒执行，将会发现逻辑错误：

window.setTimeout(hello(userName),3000);

上述写法会导致 hello 函数立即执行，并将其返回值（即 alert 的结果）作为句柄传递给 setTimeout，这并非预期的延迟执行效果。若改用字符串形式，则可以达到预期目的：

window.setTimeout("hello(userName)",3000);

这里的字符串是一段 JavaScript 代码，其中的 userName 代表变量。尽管这种写法可行，但不够直观，且在部分场景下必须使用函数引用而非字符串。为此，可以通过一个技巧来实现带参数函数的延迟调用：

 
<script language="JavaScript" type="text/javascript">
<!-- 
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
} 
//创建一个函数,用于返回一个无参数函数
function _hello(_name){
return function(){
hello(_name);
} 
} 
window.setTimeout(_hello(userName),3000);
//此处也可以写为window.setTimeout( function(){return hello(userName)}, 3000);
//就不用再定义function _hello()
//--> 
</script>

上述代码定义了一个辅助函数 _hello，它接收一个参数并返回一个无参函数。内部函数引用了外部函数的参数，从而在无需额外传参的情况下完成调用。在 window.setTimeout 中，通过 _hello(userName) 返回一个无参函数句柄，成功实现了带参数的延迟调用。