关于setInterval方法的详细用法可以参阅JavaScript setInterval()一章节。
其实在上述文章也涉及到为回调函数传参数,不过很多朋友关注点在传参本身。
下面就通过代码实例介绍一下如何为回调函数传参数。
一.错误传参方式举例:
下面看一个比较常见的错误传参方式,代码实例如下:
[JavaScript] 纯文本查看 复制代码运行代码
1 2 3 4 |
|
代码会在5秒后打印出蚂蚁部落网址"http://www.softwhy.com"。
下面我们想让func函数更加灵活一些,将打印内容通过参数的方式传递。
代码实例如下:
[JavaScript] 纯文本查看 复制代码运行代码
1 2 3 4 |
|
上述代码的本意是为回调函数传递参数"http://www.softwhy.com",然后在5秒后打印出参数。
但是运行后发现,参数会被立即打印出来,这是因为func并不是setInterval的回调函数,因为func会立即执行(也就是网址会被立即打印的原因),实际传递给setInterval的是func的返回值(当然它的返回值为undefined)。
二.传参正确方式:
setInterval还可以传递第三个参数,此参数被作为回调函数的参数。
代码实例如下:
[JavaScript] 纯文本查看 复制代码运行代码
1 2 3 4 |
|
上述代码会在5秒后打印出本站网址。
由于IE9和IE9以下浏览器不支持第三个参数,所以较早的教程很少教程。
上面的方式当前还不够稳妥,要兼容当前所有主流浏览器,可以采用如下方式。
[JavaScript] 纯文本查看 复制代码运行代码
1 2 3 4 5 |
|
上述代码可以在5秒后打印出本站网址。
代码分析如下:
(1).setInterval第一个参数是一个立即执行匿名函数,为其传递的参数是要打印的网址。
(2).此匿名函数执行后返回一个函数,返回的函数才是真正传递给setInterval的回调函数。
(3).根据作用域与作用域链的原理,返回的函数可以使用通过外层函数传递进来的参数url。
(4).于是可以正常打印出传递的网址。
总结:如果不太考虑浏览器兼容问题,可以使用为setInterval传递第三个参数的方式,如果要稳妥,那么推荐使用最后一种方式,特别说明,对于settimeout方法也是如此。