您的位置:首页 > Web前端 > JavaScript

让JavaScript中计时器setTimeout/setInterval的回调方法支持参数传递

2011-04-10 14:59 886 查看

1. 背景

在JavaScript中,我们经常要用到Timer,也就是setTimeout或者setInterval这两个方法。例如:

var t1 = setTimeout(function() {
//TODO: add your logic here
}, 1000);

同时,我们也经常听到有人报怨说里面的这个回调方法不支持参数传递。有时候,我们想要在里面的function里面用到外部的数据时,只能在外面定义一个变量,如下:

var i = 0;
setTimeout(function() {
alert(i);
}, 1000);

那么,我们如果能够里面这个function支持参数传递,是不是感觉要好点呢?比如写成这样[1]:

setTimeout(function(msg) {
alert(msg); //显示 Hello, world!
}, 1000, 'Hello, world!');

2. 初试

笔者突发奇想地试着将上述代码放到浏览器里面执行了一下:

<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Timer Args Test</title>
</head>
<body>
<script type="text/javascript">
(function(){
setTimeout(function(msg) { alert(msg); //显示 Hello, world! }, 1000, 'Hello, world!');
})();
</script>
</body>
</html>

令人惊喜的事,这段代码在Firefox 4.0, Chrome 11, Safari 5.0里面尽然能够成功的执行,弹出了Hello, world! 在IE9 中弹出的则是undefined!





3. 兼容IE

时至此刻,要想在IE下也能使用,就只有替换掉IE内置的setTimeout/setInterval方法了。如下:

/**
* @author Hyacinthus ·风信子·
*/
(function(){ // reset timer for IE
if (navigator.appName == 'Microsoft Internet Explorer') {
var _preTimeout = window.setTimeout, _preInterval = window.setInterval;

window.setTimeout = function(callback, after){
var l = arguments.length;
if (l > 2) {
var args = [];
for (var i = 2; i < l; i++) {
args.push(arguments[i]);
}

return _preTimeout(function(){
callback.apply(this, args);
}, after); //记得返回timer id
}
else {
return _preTimeout.apply(this, arguments);
}
}

window.setInterval = function(callback, cycle){
var l = arguments.length;
if (l > 2) {
var args = [];
for (var i = 2; i < l; i++) {
args.push(arguments[i]);
}

return _preInterval(function(){
callback.apply(this, args);
}, cycle);
}
else {
return _preInterval.apply(this, arguments);
}
}
}
})();

4. 结语

一些比较现代的浏览器都支持js在timer的回调函数中传入参数,只是一般不为人知而已(个人感觉这种写法以后会成为js中的标准)。

希望本文对您有帮助!

最后附上完整的HTML文件,任您把玩!》点击此处

注:[1]. 参考自NodeJs中的setTimeout语法 setTimeout(callback, delay, [arg], [...]) http://nodejs.org/docs/v0.4.5/api/timers.html

作者: ·风信子·
出处: http://www.cnblogs.com/lingcooler
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,否则保留追究法律责任的权利。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: