有时候结局不是很美好,但起码这也算是一种结局,这个系列的最后一篇settimeout,这是一个让人困惑的函数,也是我一直在吐槽JS的

原因,我们看不到JS的源代码,setimeout同样也是,从始到终都是黑盒子的使用。

一:settimeout单线程的质疑?

  所有的教科书都在说js是单线程模型,也说settimeout的执行函数会丢给js的内部执行队列,这其中还包括onlick事件以及一些xhr的回调函数。

乍一看貌似是这么一回事,既然要排队嘛,那肯定是FIFO的原则了,谁也无法保证准确的定时触发,就算精确的触发的,也不能保证在执行队列中

马上执行,因为要排队,如果我设定了5s触发,所以时间一定会在5s 以上,问题就出现在这里,这个5s触发的机制是什么样的???谁能告诉我

呢????既然js是单线程的,难道是js会不停的轮训“执行队列”吗?问执行函数5s时间到了吗?5s时间到了吗???我想JS肯定不会这么傻乎乎

做这么个“内旋”操作,因为如果我设定的触发时间是1年呢?难道还要内旋1年么???而且这种拉模式是相当耗费CPU时间的,那为了尽量节省

CPU的时间,是否会有其他线程来辅助setttimeout来做这个5s的机制呢?然后5s时间到了将setimeout中的执行函数推入js的内部执行队列呢?

到底合理的方式会是怎么样的?

二:在System.Threading.Timer中寻找灵感

  因为setimeout的闭源,我看不到settimeout内部到底怎么做到5s触发的机制,非常遗憾,我也只能去找类似语言中的Timer机制,还好在C#

中也是有这样的一个定时器,看看能不能找到些灵感,然后我就大概看了下源码:

         static void Main(string[] args)
{
System.Threading.Timer timer = new System.Threading.Timer(Run, "", , * * ); //30s Console.Read();
}

通过眼花缭乱的查找,终于明白,原来Timer仅仅是对一个Win32中CreateAppDomainTimer函数的封装,真是他们的坑货,先让你眼见为实。

其中的dueTime也就是我的Timer构造函数中的period参数,这里也就是30s,然后定时触发AppDomainTimerCallback函数,一段逻辑后再调用

Fire方法触发我们的CallCallback函数。

其实我们看到源码之后,发现Timer计时器其实是个假的,只是封装了Win32函数,并且也没有做到完完全全的30s,这是因为callback()是在调用

AppDomainTimerCallback函数之后触发的,这些逻辑也是需要耗费时间的,包括win32回调的误差,那现在有什么灵感呢?既然C#的多线程采用

工作线程去跑都有误差,那你单线程的settimeout又何德何能呢?那更不用谈用主线程去轮训settimeout这个很不现实的东西。

三:最后的一点猜测

  通过对C#中的Timer原理的一些理解,我觉得settimeout应该是这样的,这其中的5s机制应该是丢给浏览器内核线程了,由浏览器内核线程去实

现这个5s的机制,如果5s时间到了,内核会将function函数塞给js的“内部执行队列”,由js主线程空闲的时候去得以执行。毕竟浏览器线程还是有很多

的,比如下面的IE9:

   好了,不说了,说的再多也是猜测,结局并不完美,感谢大家对javascript系列的持续关注,也祝大家在新的一年工作顺利~~~

Javascript之旅——终点站:困惑的settimeout的更多相关文章

  1. JavaScript之旅(DOM)

    JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...

  2. JavaScript之旅(三)

    JavaScript之旅(三) 三.函数 在JavaScript中,定义函数的方式如下: function abs(x) { ... return ...; } 如果没有return,返回结果为und ...

  3. JavaScript之旅(二)

    JavaScript之旅(二) 二.进阶知识 js的正则表达式 异常处理 调试 变量提升 表单验证 JSON javascript:void(0) JavaScript 代码规范 二.进阶知识 1. ...

  4. Javascript之旅(一)

    Javascript之旅(一) 一.基础知识 基本语法 变量 数据类型 字符串 数组 对象 条件判断 循环 Map和Set iterable 为什么要学习JavaScript JavaScript 是 ...

  5. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  6. JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结

    已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...

  7. JavaScript你所不知道的困惑(2)

    困惑一: var obj1 = new Object(); var obj2 = obj1; obj1.name = "阳光小强"; alert(obj2.name); //输出结 ...

  8. JavaScript你所不知道的困惑(1)

    困惑一: 先看一个样例: function test(){ message = "hi"; } test(); alert(message); 会输出字符串"hi&quo ...

  9. JavaScript定时调用函数(SetInterval与setTimeout)

    setTimeout和setInterval的语法同样.它们都有两个參数.一个是将要运行的代码字符串.另一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将运行那段代码. 只是这两个函数还是有差别的 ...

随机推荐

  1. 背水一战 Windows 10 (10) - 资源: StaticResource, ThemeResource

    [源码下载] 背水一战 Windows 10 (10) - 资源: StaticResource, ThemeResource 作者:webabcd 介绍背水一战 Windows 10 之 资源 St ...

  2. 孙鑫MFC学习笔记12:文件读写

    1.指向常量的指针 2.指针常量 3.C语言对文件操作是在缓冲区,在缓冲区满或文件关闭时写入文件 读取相同 4.fflush刷新缓冲区,使缓冲区数据写入文件 5.fseek改变文件指针偏移量 6.st ...

  3. 调整 FMX Android 文字显示「锯齿」效果

    说明:调整 Firemonkey Android 显示文字有「锯齿」效果 适用:Firemonkey Android 平台 修改方法: 请将源码 FMX.FontGlyphs.Android.pas  ...

  4. EventBus简单的实现

    EventBus是最近项目用到的,也只是会些简单的功能,不过感觉功能蛮强大的.代码链接:http://download.csdn.net/detail/qq_29774291/9629346 Even ...

  5. shell脚本(管理守护进程)

    工作中常常会遇到处理消息队列的消费者进程,这样的进程是一个守护进程,即一个服务.服务通常写个shell脚本来管理,查询服务的status  ,启动start 关闭stop  重启reload.最近在学 ...

  6. WPF实现强大的动态公式计算

    数据库可以定义表不同列之间的计算公式,进行自动公式计算,但如何实现行上的动态公式计算呢?行由于可以动态扩展,在某些应用场景下将能很好的解决实际问题. 1.VS2012新建一个WPF应用程序WpfApp ...

  7. 经典 HTML5 & Javascript 俄罗斯方块游戏

    Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...

  8. 免费 PSD 素材:25个全新的界面设计资源

    在这篇文章中,我们给大家收集了25套全新的 UI 设计素材.这些来自优秀设计师的 PSD 源文件素材让其它的设计师们在设计用户界面原型的时候能够非常便利. 网站用户界面,移动应用程序用户界面和对设计师 ...

  9. Cool!15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  10. 实例之HTML标签属性

    鼠标放在图片上会显示说明文字的代码 <img src="图片地址" width=620 height=138 border=0 title="说明文字" ...