让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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,否则保留追究法律责任的权利。
相关文章推荐
- javascript settimeout传递参数
- jQuery setTimeout传递字符串参数报错怎么办?解决方法
- JavaScript setInterval方法IE下不支持传递参数
- jQuery setTimeout传递字符串参数报错的解决方法
- 让window.setTimeout等支持带参数方法
- 理解JavaScript 执行机制及异步回调(setTimeout/setInterval/Promise)
- jQuery setTimeout传递字符串参数报错的解决方法
- JavaScript进阶:setInterval、setTimeout不能传递带参数的函数的解决方案
- setTimeout/setInterval的使用和参数调用方法
- JS setTimeout、setInterval传递参数总结
- Javascript用Url传递参数出现中文乱码的解决方法
- JavaScript 的数值转换 和计时器 setInterval clearInterval
- js setTimeout 参数传递
- setTimeout setInterval可带参数
- JavaScript Timers with setTimeout and setInterval
- 修改 window.setTimeout,使之可以传递参数和对象参数
- JavaScript实现页面之间传递参数的方法
- javascript通过url向jsp页面传递中文参数乱码解决方法
- JavaScript Timers with setTimeout and setInterval
- js setTimeout 传递带参数的函数的2种方式