博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS中定时器线程理解
阅读量:6904 次
发布时间:2019-06-27

本文共 1415 字,大约阅读时间需要 4 分钟。

最近在准备面试,对于JS原理性的文章,感觉很有必要系统整理下,不必每一次都要查询资料,节约时间。

问题

setTimeout(function(){    console.log("开始执行定时器回调: "+ new Date())    console.log("我是定时器")},0)

大家觉得这个定时器定时时间设为0,有意义吗?是否觉得上述代码效果等同于

console.log("开始执行定时器回调: "+ new Date())console.log("我是定时器")

实践是检验真理的最好途径。我们不排斥拿来主义,但是如果能自己实践验证,对于提升自身格物致知的精神很有裨益。针对上述问题,我们用两个实验来解开答案:

实验一:

console.log("1")console.log("我是定时器")console.log("2")

打印结果

clipboard.png

实验二:

console.log("1")setTimeout(function(){    console.log("我是定时器")},0)console.log("2")

打印结果

clipboard.png

通过上述两个实验结果,我们可以得知 定时器定时为0时,JS执行到定时器这一步,并不是直接开始执行定时回调,而是执行了后续代码之后,才执行。

那为什么会这样呢?

我们仍然拿两个例子来说明:
实验三:

console.log("1")    console.log("定时器线程开始计时: "+ new Date())    setTimeout(function(){        console.log("开始执行定时器回调: "+ new Date())    },5000)    for(var i=0;i<500;i++){        console.log("我是循环")    }    console.log("事件队列最后一位: "+ new Date())

打印结果:

clipboard.png

从结果中可以看出,从定时器线程开始定时,到定时5秒结束后,将定时回调事件放入事件队列中执行,用了5秒。

实验四:

console.log("1")    console.log("定时器线程开始计时: "+ new Date())    setTimeout(function(){        console.log("开始执行定时器回调: "+ new Date())    },5000)    for(var i=0;i<50000;i++){        console.log("我是循环")    }    console.log("事件队列最后一位: "+ new Date())

打印结果:

clipboard.png

从结果中可以看出,从定时器线程开始定时,到定时5秒结束后,将定时回调事件放入事件队列中执行,用了9秒。

两次结果不一致,是因为JS代码执行到定时器时,此时定时器线程开始定时,定时时间到之后,将定时回调事件推入事件队列最后,JS线程依据事件队列中顺序执行。而之所以有的延时5秒,有的延时9秒,是因为如果定时器开始计时时,JS事件队列中执行剩余的事件小于5秒,则定时结束后,将定时回调事件推入队列中,JS能够立即执行定时回调事件,所以是5秒;而如果JS事件队列中执行剩余的事件大于5秒,那么在定时结束后,将定时回调事件推入队列后,还需一些时间来执行定时回调事件之前的事件,所以为9秒。

clipboard.png

转载地址:http://ezmdl.baihongyu.com/

你可能感兴趣的文章
自定义验证控件CustomValidator的使用
查看>>
Homework3
查看>>
程序猿想聊天 - 創問 4C 團隊教練心得(二)
查看>>
Windows Azure媒体服务使得伦敦奥运会的云端传输成为可能
查看>>
错误:媒体集有 2 个媒体簇,但只提供了 1 个 sql2005 备份错误。
查看>>
Linux命令行快捷键
查看>>
Azure Messaging-ServiceBus Messaging消息队列技术系列6-消息回执
查看>>
grep及正则表达式
查看>>
算法与数据结构之翻转问题
查看>>
【第二组】项目冲刺(Alpha版本) 第一次每日例会 2017/7/10
查看>>
软件运行过慢?系统打开特别慢?连系统都装不了?可能是硬盘坏了
查看>>
JDBC查询结果集ResultSet--示意图
查看>>
Mongo的安全验证
查看>>
Python的安装位置与Python库
查看>>
thinkphp Class 'PDO' not found 错误
查看>>
(实用篇)PHP ftp上传文件操作类
查看>>
完成注册功能
查看>>
职场规划从“试错”开始
查看>>
AtCoder - 2568 最小割
查看>>
Lucene5.x 中文 同义词
查看>>