【武汉分院168期】js中定时器的用法

定时器用法简介

一:背景介绍

在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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 9.26-9.30 第8章 驯服线程和定时器 定时器可以在js中使用,但它不是js的一项功能,如果我们在非浏览器环...
    如201608阅读 3,674评论 0 2
  • 定义 js中内置的一个方法,每隔一段时间或者延迟一段时间去执行一段指定的代码 分类 重复执行定时器 setInte...
    素弥阅读 4,075评论 0 0
  • “这种从未有过的感觉以烦恼而又甘甜的滋味在我心头萦绕,对于它,我犹豫不决,不知冠以忧愁这个庄重而优美的名字是否合适...
    不喜欢吃猫的鱼阅读 3,452评论 0 2
  • 目录 一路上虽然偶遇了不少魔物,在达克鲁尽力的躲避下并没有出现紧张刺激的战斗。 达克鲁从空中的树海穿过,估计着自己...
    幻想中圣人阅读 2,981评论 0 4
  • 好冷啊啊啊啊啊啊啊啊 每日苟且蜷缩在家 不及咸鱼 痛恨此时的自己 希望有所改变 天天对着手机 无所事事 游手好闲 ...
    夜莺与猫阅读 2,299评论 0 0