发帖
扫码访问
 注册
 登录
首页 ›电脑› 电脑学堂 › 查看内容

setTimeout

2016-1-22 11:43 2931 0

摘要: JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。初始接触它的人都觉得好简单，实时上真的如此么？这里记载下，一路对其 ...
关键词： setTimeout 函数 参数 代码 数名 console 方法 1000 上面 两个

JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。初始接触它的人都觉得好简单，实时上真的如此么？这里记载下，一路对其使用姿势变迁的历程。

你所不知道的setTimeout

1, setTimeout()基础

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

1
var timerId = setTimeout(func|code, delay)

上面代码中，setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。

1
2
3
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);

上面代码的输出结果就是1，3，2，因为setTimeout指定第二行语句推迟1000毫秒再执行(如果这在Sublime下运用插件以nodejs环境来执行，许解释器不同，会报错)。

需要注意的是，推迟执行的代码必须以字符串的形式，放入setTimeout，因为引擎内部使用eval函数，将字符串转为代码。如果推迟执行的是函数，则可以直接将函数名，放入setTimeout。一方面eval函数有安全顾虑，另一方面为了便于JavaScript引擎优化代码，setTimeout方法一般总是采用函数名的形式，就像下面这样。

1
2
3
4
5
6
function func(){
  console.log(2);
}
setTimeout(func,1000);
// 或者
setTimeout(function (){console.log(2)},1000);

setTimeout传参数

除了前两个参数，setTimeout还允许添加更多的参数。它们将被传入推迟执行的函数（回调函数）。

1
2
3
setTimeout(function(a,b){
  console.log(a+b);
},1000,1,1);

上面代码中，setTimeout共有4个参数。最后那两个参数，将在1000毫秒之后回调函数执行时，作为回调函数的参数。

IE 9.0及以下版本，只允许setTimeout有两个参数，不支持更多的参数;可以在匿名函数中，让回调函数带参数运行，再把匿名函数输入setTimeout；例如:

1
2
3
setTimeout(function() {
  myFunc("one", "two", "three");
}, 1000);

当然也可以使用bind或apply方法来解决。

例如使用bind方法，把多余的参数绑定在回调函数上面，生成一个新的函数输入setTimeout。

1
setTimeout( function(arg1){}.bind(undefined, 10), 1000 );

上面代码中，bind方法第一个参数是undefined，表示将原函数的this绑定全局作用域，第二个参数是要传入原函数的参数。它运行后会返回一个新函数，该函数不带参数。

setTimeout注意点

setTimeout()中回调函数中的this
如果被setTimeout推迟执行的回调函数是某个对象的方法，那么该方法中的this关键字将指向全局环境，而不是定义时所在的那个对象。

1
2
3
4
5
6
7
8
9
var x = 
                      声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 
                      [邮箱地址] 删除

路过
雷人
握手
鲜花
鸡蛋
收藏 分享 邀请
上一篇：javascript实现图片轮播效果下一篇：你不知道的高性能JAVASCRIPT

最新评论

相关分类