最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

定时器有哪些用法?

XAMPP下载 admin 526浏览 0评论
 这里是修真院前端小课堂,每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能,本篇分享的是:

【定时器有哪些用法?】

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。

转载请注明:XAMPP中文组官网 » 定时器有哪些用法?

您必须 登录 才能发表评论!