系统理解 setTimeout()和 setInterval()

今天刚好在看setTimeout()的一个案例,在案例的解析中提到了setTimeout()和setInterval()的使用区别,但是比较理论,所以

决定自己也总结一下,写写例子帮助理解一下。

       首先是说说这两个方法的具体时如何使用的。

1、setTimeout()方法

      这个方法所有浏览器都支持,setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来

设定一个时间, 时间到了, 就会执行一个指定的 method。

      定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

      语法: setTimeout(code,millisec)

      参数: code (必需):要调用的函数后要执行的 JavaScript 代码串。millisec(必需):在执行代码前需等待的毫秒数。   

 提示: setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()(即利用递归)。

      看完了基本的语法,接下来我写一个很简单的例子说明这个的使用方法。

代码如下:

<!DOCTYPE html>

setTimeout()使用

请等待三秒!

setTimeout("alert('终于等到你了!')",3000)

      当我们打开网页3秒时,就会弹出一个框。但是,只会弹出一次,因为 setTimeout()不会自动重复执行,是在载入后的延迟指定

时间去执行一次表达式。

当然,我们也可以让setTimeout()执行函数,而且可以重复执行多次(利用递归),而不是一次。

代码如下:

<!DOCTYPE html>

varx =0;

functioncountSecond()

        {

x = x+1;

document.haorooms.haoroomsinput.value = x;

setTimeout("countSecond()",1000)

        }

    countSecond();

       实现的方法就是让函数自身反复调用。

2、setInterval()方法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 

clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法: setInterval(code,millisec[,"lang"])

     参数: code 必需。要调用的函数或要执行的代码串。millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值: 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

     如果我们想要每隔3秒就弹出一个框要如何实现呢?

代码如下:

<!DOCTYPE html>

Title

functiontest(){

this.name ="setInternal";

this.waitMes =function(){

varthat =this;

setInterval(function(){

                alert(that.name);

},3000);

        }

    }

varte =newtest();

    te.waitMes();

       setInterval() 从载入后,每隔指定的时间就执行一次表达式。

3、区别

     通过上面可以看出,setTimeout和setinterval的最主要区别是:

    1)setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束。如果运行的代码中再次运行同样

的setTimeout命令,则可循环运行。(即 要循环运行,需函数自身再次调用 setTimeout());而 setinterval是循环运行的,即每

到设定时间间隔就触发指定代码。这是真正的定时器。

    2)setinterval使用简单,而setTimeout则比较灵活,可以随时退出循环,而且可以设置为按不固定的时间间隔来运行,比如第

一次1秒,第二次2秒,第三次3秒。


值得注意的是:

setTimeout(function(){

    console.log(1);

});

console.log(0);

这里,实际上,把setTimeout的第二个参数设置为0s,并不是立即执行函数的意思,只是把函数放入异步队列。浏览器先执行完同步队列里的任务,才会去执行异步队列中的任务。

setInterval()原理与setTimeout(),也是讲代码放入异步队列中。但是,setInterval()存在一个问题,

使用setInterval()的问题在于,定时器代码可能在代码再次被添加到队列之前还没有完成执行,结果导致定时器代码连续运行好几次,而之间没有任何停顿。而javascript引擎对这个问题的解决是:当使用setInterval()时,仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。

  但是,这样会导致两个问题:1、某些间隔被跳过;2、多个定时器的代码执行之间的间隔可能比预期的小。



两者的工作原理:大家都知道,JavaScript是单线程执行的,setTimeout和setInterval执行原理其实也很简单。

setTimeout会在调用后的millisec时间间隔后往事件队列里添加回调函数,然后等待执行。 

setInterval会按照第二个参数的周期时间周期性的往事件队列添加回调函数,然后等待执行,这里的一个注意点是如果事件队列里的回调函数还没有执行,不会重复添加。

注:html5规定setTimeout和setInterval的延迟时间最少为4ms. 所以setTimeout(function(){},0)其实是setTimeout(function(){}, 4)。


如果上面代码中的onclick事件处理程序执行了300ms,那么定时器的代码至少要在定时器设置之后的300ms后才会被执行。队列中所有的代码都要等到javascript进程空闲之后才能执行,而不管它们是如何添加到队列中的。如下图:


 如图所示,尽管在255ms处添加了定时器代码,但这时候还不能执行,因为onclick事件处理程序仍在运行。定时器代码最早能执行的时机是在300ms处,即onclick事件处理程序结束之后。



实际上,把setTimeout的第二个参数设置为0s,并不是立即执行函数的意思,只是把函数放入异步队列。浏览器先执行完同步队列里的任务,才会去执行异步队列中的任务。


验证例子:

例一:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script>

(function(){

var i=0;

    setTimeout(function(){

        document.getElementById("demo").innerHTML=1233131123;

},2500)

setInterval(function(){

i++;

document.getElementById("demo").innerHTML=i;

},1000)

})()

</script>

</head>

<body>

<h1>我的第一个 JavaScript 程序</h1>

<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>

</html>

此代码结果显示先后顺序:

1(1s)、2(2s)、1233131123(2.5s)、3(3s)、4(4s)........

原理分析:


例二:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script>

(function(){

var i=0;

setInterval(function(){

i++;

document.getElementById("demo").innerHTML=i;

setTimeout(function(){

        document.getElementById("demo").innerHTML=1233131123;

},2500)

},1000)

})()

</script>

</head>

<body>

<h1>我的第一个 JavaScript 程序</h1>

<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>

</html>

效果及分析:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  •   JavaScript 是一种极其灵活的语言,具有多种使用风格。   一般来说,编写 JavaScript 要么...
    霜天晓阅读 738评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,693评论 0 5
  • 文/小叶 白茶功效:因富含氨基酸,酚氨比值较小(茶多酚为茶苦涩因素,氨基酸则主导甜度),所以口感为清甜润滑。降三高...
    博土阅读 1,857评论 7 1
  • 硝烟弥漫的战场 本不该出现的一刻宁静 意外却遇见了你 一架会弹奏风暴的钢琴 我试着拨动你的琴键 原谅那来自门外汉的...
    简村小吹阅读 250评论 11 13