定时器用法简介
一：背景介绍
在js中，我们会用到两种计时器：第一种是setTimeOut；第二种是setInterval
二：知识剖析
1：setTimeout允许设置一个延时对象，一定时间之后执行这个对象，但是只执行一次，不会重复执行
代码示例如下，该定时器被设置为1000ms，即一秒之后执行一次，并且只执行一次；
使用方法及格式见下图：
2、setInternval允许设置一个延时对象，每隔一定时间之后重复执行这个对象，无限循环，直到该定时器被清除，或者页面关闭
代码示例如下：该定时器会每隔1秒，执行一次该函数，并且循环执行
三：常见问题
在js任务一变色九宫格中，可能都遇到过，点击几次之后，变色越来越快的情况？
这是因为，没有设置清除定时器的语句，每点击一次鼠标，都会触发一个定时器，点击多次之后，浏览器会同时重复好几个循环，自然会越来 越快
四：清除定时器
window.clearTimeout(time1)
window.clearInterval(time1)
//time1 为之前设置的定时器
这两种定时器，设置方法有区别，但是清除方法是等效的，就是无论你设置的定时器是哪一种
都可以使用上边任意一种清除代码清除掉
五：编码实战
详见视频
六：扩展思考
我们还可以通过定时器的返回值清除定时器
举例如下:
function color(){
//....要执行的代码
}
time1=setInterval（"color()",1000）;
//此定时器会每一秒重复执行一次函数color()
time2=setInterval（"color()",2000）;
//此定时器会每隔两秒重复执行一次函数color()
我们可以通过任意一种清除方法来清除定时器
window.clearTimeout(time1);或者使用window.clearInterval(time1)
但是，第一个定时器会有一个返回值1，同样第二个定时器也会有一个返回值2
所以，我们也可以这样清除定时器
window.clearTimeout(1);
来清除第一个定时器
window.clearInterval(2)
来清除第二个定时器
七：参考资料
http://www.cnblogs.com/wangying731/p/5164780.html
八：深度思考
在日常工作中，有哪些地方用得到定时器
JS中定时器的用法_腾讯视频
ppt链接：
github.com/ptteng/PPT/blob/master/PPT/js-01-timer.html
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！http://www.jnshu.com/login/1/92166011
网友评论