|
|
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);
}
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);
}
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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，否则保留追究法律责任的权利。 |
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-2-23 09:13:58
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡