JavaScript中setInterval与setTimeout传递参数的四种方案

JavaScript定时器传参问题背景

在JavaScript中，无论是使用setTimeout还是setInterval，当直接将函数名作为回调句柄传递时，系统无法直接支持参数传递。然而在实际开发场景中，往往需要向定时执行的函数传递特定参数。

因此，必须寻找合适的方法来解决这一限制。

字符串形式传参及其局限

第一种方案是使用字符串形式，但该方法存在明显缺陷：参数值无法在运行周期内动态改变。

示例代码如下：setInterval("foo(id)",1000);

匿名函数包装方案

第二种方案是使用匿名函数进行包装，这是目前较为推荐的写法。

 
window.setInterval(function()
{ 
foo (id);
}, 1000);

通过这种方式，可以周期性地执行foo函数并传入变量id，实现了参数传递的需求。

返回无参函数的高阶函数模式

第三种方案是定义一个返回无参函数的外层函数。

 
function foo(id)
{ 
alert(id);
} 
function _foo(id)
{ 
return function()
{ 
foo(id);
} 
} 
window.setInterval(_foo(id),1000);

这里定义了一个名为_foo的辅助函数，它接收一个参数，并返回一个不带参数的匿名函数。该内部函数引用了外部函数的参数，从而在调用时无需再次传递参数。

在window.setInterval中，通过调用_foo(id)获取返回的无参函数句柄，从而间接实现了参数传递的功能。

重写定时器函数实现动态传参

第四种方案是直接修改或重写setInterval函数。

 
function foo(id)
{ 
alert(id);
} 
var _sto = setInterval;
window.setInterval = function(callback,timeout,param)
{ 
var args = Array.prototype.slice.call(arguments,2);
var _cb = function()
{ 
callback.apply(null,args);
} 
_sto(_cb,timeout);
} 
window.setInterval(hello,3000,userName);

上述所有方法同样适用于setTimeout函数。