注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

setInterval和setTimeout参数剖析  

2015-04-04 20:33:46|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
先来回顾之前学习的定时器的基本语法
setInterval语法:
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
 
setTimeout语法:
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
 
当定时器第一个参数是函数名

// 存储定时器返回的ID
var timer = null;

function show() {
console.log("梦幻雪冰、独行冰海");
}

timer = setInterval(show, 1000);
console.log(timer);

// 当 setInterval 被调用时,它会返回一个 ID 标识并且计划在将来大约 1000 ms后调用 show函数。
show函数间隔1000ms多次执行。

注意:基于 JavaScript 引擎的计时策略,以及本质上的单线程运行方式,所以其它代码的运行可能会阻塞此线程。因此没法确保函数会在 setInterval 指定的时刻被调用(拿上面的那个例子来说,不能保证间隔1000ms调用一次)。
函数名与函数调用的区别
setInterval 的第一个参数是函数对象(函数的地址),一个常犯的错误是这样的 setInterval (show(), 1000),这里回调函数是 show 的返回值,而不是show本身。大部分情况下,这是一个潜在的错误。如果函数返回 undefined,setInterval 也不会报错。

当定时器第一个参数是匿名函数

// 存储定时器返回的ID
var timer = null;

timer = setInterval(function() {
console.log("梦幻雪冰、独行冰海");
}, 1000);
console.log(timer);

上面这部分详细讲解在JavaScript 高级计时器 详细分析  

当定时器第一个参数是JavaScript代码串
setTimeout 和 setInterval 都可以接受字符串作为它们的第一个参数,但是这个特性绝对不要使用,因为它在内部使用了 eval(绝对不要使用 eval,任何使用它的代码都会在它的工作方式,性能和安全性方面受到质疑)。

function show() {
// 将会被调用
console.log("梦幻雪冰");
}

function test() {
function show() {
// 不会被调用
console.log("独行冰海");
}
setTimeout('show()', 2000);
}
test();

结果:输出的是 梦幻雪冰
解析:由于 eval 在这种情况下不是被直接调用(因为eval的作用域是当前执行的作用域,setTimeout的作用域是在全局,所以eval不是在函数test里面执行,而是在全局中执行),因此传递到 setTimeout 的字符串会自动在全局作用域中执行;因此,上面的回调函数使用的不是定义在 test 作用域中的局部变量 show。简单的理解,只能调用全局中声明的函数。
欢迎学习交流——梦幻雪冰

回调函数传递参数使用字符串形式

function test(a, b) {
console.log(a + "和" + b);
}

// 不推荐大家这样做,因为这样定时器就会使用到eval
setTimeout('test(1, 2)', 2000);

使用匿名函数完成相同功能

function test(a, b) {
console.log(a + "和" + b);
}

// 可以使用匿名函数完成相同功能
setTimeout(function() {
test(1, 88);
}, 2000);

还有另外一种解决办法,但是在IE9以及IE9以下不支持。

function test(a, b) {
console.log(a + "和" + b);
}

setTimeout(test, 2000, 1, 2);

欢迎学习交流——梦幻雪冰
资料:
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
 
定时器第一个参数会在全局作用域中执行,因此函数内的 'this'将会指向这个全局对象

function test(a, b) {
// this执行的是window
console.log(this);
}

setTimeout(test, 2000);


总结:
不要使用字符串作为 setTimeout 或 setInterval 函数的参数,当需要向回调函数中传递参数时,我们可以用匿名函数的,在匿名函数内部执行回调函数。另外,尽量避免使用 setInterval 函数,从而避免可能导致的回调函数堆积现象。

资料参考:JavaScript秘密花园
                MDN

欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
HTML5学堂官网——HTML5学堂
HTML5学堂微信
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
 
  评论这张
 
阅读(157)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017