【修真院WEB小课堂】定时器有哪些用法?
这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【定时器有哪些用法?】
1.背景介绍
什么是定时器?
JS提供了一些原生方法来实现延时去执行某一段代码。
我们在JS中一般会使用以下两种定时器
setTimeOut( ) setInterval( )
setTimeout
暂停指定的毫秒数后执行指定的代码
setInternval
间隔指定的毫秒数不停地执行指定的代码。
2.知识剖析
setTimeOut:
语法:setTimeOut(code,millisec)
这个方法所有浏览器都支持,setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。
code:必需,要调用的函数或执行的JavaScript代码;
millisec:必需,在执行代码前需等待的毫秒数。
该定时器只执行一次,若需要多次调用,可使用setInterVal()或让code自身再次调用setTimeOut()。
返回值: 一个可以传递给 Window.clearTimeOut() 从而取消对 code 的周期性执行的值。
清除定时器:
语法:clearTimeOut(str)
为了更方便的清除指定定时器,就必须在用定时器的时候,定义一个变量来记录定时器的返回值。比如:
var str = setTimeOut(test,1000);
setInterVal:
语法:setInterval(code,millisec)
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
code:必需。要调用的函数或要执行的代码串。
millisec:必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
返回值: 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
清除定时器:方法与 setTimeOut() 相同。
语法:clearInterval()
这两种定时器,设置方法有区别,但是清除方法是等效的,就是无论你设置的定时器是哪一种 都可以使用上边任意一种清除代码清除掉。
3.常见问题
setInterval多次调用后执行频率为什么越来越快?
当我们在启动一个定时器时,电脑会为我们开启一个定时器,当我们再次用同一个名字开启定时器时,电脑会再开另外开启一个定时器,与先前开启的定时器无关,我们所谓的定时器的名字,它只是一个变量而已,并不是定时器的名字,它的功能是清定时器用的,也就是通过clearInterval(变量)使定时器停止运行。
<!---- setInterval() 的运行模式是按照指定的周期(以毫秒计)来调用函数或计算表达式。
这就使得在某个多次执行或者重复执行事件中创建的setInterval()都会独立的保留下来。 ---->
4.解决方案
方案一:每次调用前清除定时器
var timer; var flashStart = function () {clearTimeout(timer);timer = setInterval(function(){/* 代码块…… */},1000);};
方案二:给定时器加一个开关
var switch = 'off';var timer;var function test(){if(switch === 'off'){timer = setInterval(function(){/* 代码块…… */},1000); }switch = 'on';}
5.编码实战
6.扩展思考
若参数 millisecs 为 0 ,会发生什么?
Javascript是单线程执行的,也就是无法同时执行多段代码,当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列,一旦当前任务执行完毕,再从队列中取下一个任务。这也常被称为“阻塞式执行”。
如果代码中设定了一个setTimeout,那么浏览器便会在合适的时间,将代码插入到任务队列中,如果这个时间设为0,就代表立即插入到队列,但不是立即执行,仍要等待前面代码执行完毕。所以setTimeout并不能保证执行的时间,是否及时执行取决于javascript 线程拥挤还是空间。
function order(){console.log(1);num = 2;var timer = setTimeout("console.log(num)",0);console.log(3);};// 输出为 1,3,2
7.参考文献
参考一:
JavaScript定时器实现的原理分析
参考二:
BOM系列第一篇之定时器setTimeout和setInterval
参考三:
setTimeout和setInterval从入门到精通
8.更多讨论
如何动态改变定时器的时间间隔?
使用定时器可以实现哪些有趣的功能?
9.提问互动
1.setInterval、setTimeout 中的函数引用,带引号和不带引号有什么区别?
答:带引号的“test()”和不带引号的 test 是一样的,都是表示 test 函数,在一定时间时候调用该函数。而将带引号的方法去掉引号,变成 test(),则在解析到定时器这一行的时候,会发现 test()是函数调用(执行),会先进行函数调用,便将定时器忽略掉了。所以要是带括号的话,必须要加引号。
2.setTimeOut 只能用于单次执行吗?
答:不是的。若想要多次调用,可以让 code 自身再次调用 setTimeOut。demo如下:
function test(){console.log("咕咕咕")ggg = setTimeout(test,1000);};
3.关于 setTimeOut 的this指向哪里?
答:setTimeout方法是挂在window对象下的。超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window对象,在严格模式下是undefined。
【修真院WEB小课堂】定时器有哪些用法?相关推荐
- 【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点--angular js常用指令 ng-bl ...
- 【修真院web小课堂】请描述 BFC(Block Formatting Context) 及其如何工作
请描述 BFC(Block Formatting Context) 及其如何工作 小课堂[北京-WEB-A组] 分享人:要来点本子吗 大家好,我是IT修真院北京分院第35期的学员,一枚正直.纯洁.善良 ...
- 【修真院web小课堂】对一个数组 FILTER、SOME、MAP、FOREACH的操作分别有什么作用?
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--对一个数组 FILTER.SOME.MA ...
- 【修真院web小课堂】ID和class有什么区别?
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js(职业)任务一,深度思考中的知识点--ID和class有什么区别? 1.背景介 ...
- 【修真院pm小课堂】详谈用户体验五要素
[修真院pm小课堂]详谈用户体验五要素 用户体验五要素在产品的工作中经常听到,那么他究竟是什么呢?怎样去使用呢? 一.战略层 明确商业目标和用户目标,解决两者之间的冲突,找到平衡点,确定产品原则和定位 ...
- 【修真院java小课堂】ArrayList浅析
大家好,我是IT修真院郑州分院第8期学员,一枚正直善良的java程序员.今天给大家分享一下,修真院官网 java任务中可能会使用到的知识点: ArrayList浅析 width="640&q ...
- 【修真院Java小课堂】Annotation注解
标题: [修真院Java小课堂]Annotation注解 开场语: 大家好,我是IT修真院西安分院第三期学员,一枚正直纯洁善良的JAVA程序员,今天给大家分享一下,修真院官网JAVA任务七,深度思考中 ...
- 【修真院JAVA小课堂】redis缓存集群简单介绍
大家好,我是IT修真院郑州分院第11期的JAVA学员,一枚正直纯洁善良的java程序员. 今天给大家分享一下,redis缓存集群简单介绍. 1.背景介绍 redis是一个key-value存储系统.和 ...
- 【修真院JAVA小课堂】什么是压测,为什么要进行压力测试?JMETER工具的使用
大家好,我是IT修真院郑州分院第11期的JAVA学员,一枚正直纯洁善良的java程序员. 今天给大家分享一下,什么是压测,为什么要进行压力测试?JMETER工具的使用. 1.背景介绍 压测,即压力测试 ...
最新文章
- mysql 查询用户最后登陆时间_弄懂mysql:mysql的通信协议
- 《构架之美》阅读笔记四
- wtp-all-in-one-sdk-R-1.5 使用方法简单说明
- iOS开发如何实现消息推送机制
- TP、PHP同域不同子级域名共享Session、单点登录
- 怎么把数据文件上传云服务器,怎么把数据上传导云服务器
- Linux DMA Engine framework(3)_dma controller驱动
- 深入分析AsyncTask
- 阿里云链接ftp报错:	20 秒后无活动,连接超时 错误:无法连接到服务器
- Expressbody-parser
- 前台CSS颜色代码大全
- 元素周期表排列的规律_元素周期表是根据什么排列的?
- pandas用in筛选数据
- 为什么很多人打游戏感觉很快乐,然而学习工作中的满足感却很低
- 示波器的使用及其原理
- 百行代码构建神经网络黑白图片自动上色系统
- python能代替matlab吗_MATLAB替代软件 - 老牛博客
- 安装Neo4j图型数据库
- chrome浏览器截图插件有哪些
- cocos做飞机大战笔记【创建道具】
热门文章
- 面对 ESM,webpack 还有还手之力吗?
- GitHub改为token验证后,如何提交代码?
- thinkphp连mysql增删改查_ThinkPHP5.1框架数据库链接和增删改查操作示例
- android9获取蓝牙地址,Android获取本机蓝牙地址
- yii mysql 2002_laravel 中出现SQLSTATE[HY000] [2002] 如何解决?
- java动态删除属性值_JavaBean动态添加删除属性
- 心理学家发现脚部动作可表现性格特征
- VB制作OCX控件的步骤
- 银行内鬼程序员曝光:服务器植病毒,ATM取款717万,账户余额还不变
- 一份点赞上千的《算法》讲义,来自20年教学经验的UIUC计算机教授