JS是单线程引擎:它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。

浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。

  • javascript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS线程在运行JS程序。
  • GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
  • 事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。(当线程中没有执行任何同步代码的前提下才会执行异步代码)

利用setTimeout(fn,0)的特性,可以帮助我们在某些极端场景下,修正浏览器的下一个任务。

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如

setTimeout( function(){ alert(’你好!’); } , 0);
setInterval( callbackFunction , 100);

认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了.
同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!

但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解:

div.onclick = function(){
setTimeout( function(){document.getElementById(’inputField’).focus();}, 0);
};

既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚定的信念已开始动摇.

直到最后某一天 , 你不小心写了一段糟糕的代码:

setTimeout( function(){ while(true){} } , 100);
setTimeout( function(){ alert(’你好!’); } , 200);
setInterval( callbackFunction , 200);

第一行代码进入了死循环,但不久你就会发现,第二,第三行并不是预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯!

这时你彻底迷惘了,这种情景是难以接受的,因为改变长久以来既定的认知去接受新思想的过程是痛苦的,但事实摆在眼前。

事实上的,JavaScript使用了障眼法,在多数时候骗过了我们的眼睛,这里背光得澄清一个事实:

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.

第一行代码永远的占用了JS线程,所以后面的无法再执行。

setTimeout( function(){ while(true){} } , 100);
setTimeout( function(){ alert(’你好!’); } , 0);

setTimeout(fn,0)可调整JS线程执行的顺序,插入到当前执行,即可alert出 你好! 但是第一行代码还是会一直执行。

原文参考:  https://www.cnblogs.com/silin6/p/4333999.html

https://blog.csdn.net/kongls08/article/details/6996518

关于setTimeout(fn,0)的更多相关文章

  1. JavaScript下的setTimeout(fn,0)意味着什么?

    近期在研究异步编程的我对于setTimeout之类的东西异常敏感.在SegmentFault上看到了一个问题<关于SetTimeout时间设为0时>:提问者读了一篇文章,原文解释setTi ...

  2. setTimeout(fn, 0)引发的JavaScipt线程的思考

    起因 周五改一个checkbox的display属性被错误地设置为none的bug. 经debug发现, 有两个地方修改了display属性: 1) checkbox的controller; 2) c ...

  3. 【 js 基础 】【 源码学习 】 setTimeout(fn, 0) 的作用

    在 zepto 源码中,$.fn 对象 有个 ready 函数,其中有这样一句 setTimeout(fn,0); $.fn = { ready: function(callback){ // don ...

  4. setTimeout(fn, 0) 的作用

    在 zepto 源码中,$.fn 对象 有个 ready 函数,其中有这样一句 setTimeout(fn,0); 1 $.fn = { 2 ready: function(callback){ 3 ...

  5. setTimeout(fn,0)

    我们都知道setTimeout是一个延迟执行的函数 console.log(); setTimeout(function(){console.log();},); console.log(); 会得到 ...

  6. setTimeout(fn,0)的作用分析

    众所周知,大家对setTimeout的用法肯定都比较熟悉了,但是不是还是会经常忘记使用呢,例如博主阿里面试时就忘了,见阿里前端面试. 今天跟大家讨论一下setTimeout(fn,0)的用法,相信很多 ...

  7. Why is setTimeout(fn, 0) sometimes useful?

    http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful jquery validation s ...

  8. Javascript定时器(三)——setTimeout(func, 0)

    setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...

  9. setTimeout(f, 0)的应用&利用Deferred实现队列运行

    任务:从mongodb中导出csv数据,输出内容如下userid username usergender points points表: { "userid" : 1022, &q ...

随机推荐

  1. 【Leetcode-easy】Roman to Integer

    罗马数字转化为整数 * 1.基本数字 Ⅰ.X .C 中的任何一个.自身连用构成数目.或者放在大数的右边连用构成数目.都不能超过三个:放在大数的左边只能用一个: * 2.不能把基本数字 V .L .D ...

  2. 20145239杜文超 《Java程序设计》第8周学习总结

    20145239 <Java程序设计>第8周学习总结 教材学习内容总结 通用API 日志API 1.java.util.logging包提供了日志功能相关类与接口,使用日志的起点是logg ...

  3. 《CSS权威指南(第三版)》---第一章 CSS和文档

    主要学习的知识是怎么把CSS和HTML文档关联: 1.这是默认的样式表 <link rel="stylesheet" href="" type=" ...

  4. Hadoop- MapReduce在实际应用中常见的调优

    1.Reduce Task Number 通常来说一个block就对应一个map任务进行处理,reduce任务如果人工不去设置干预的话就一个reduce.reduce任务的个数可以通过在程序中设置   ...

  5. (转)HLS协议,html5视频直播一站式扫盲

    本文来自于腾讯bugly开发者社区,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直播这么火,再不学就 ou ...

  6. 浅析linux 下shell命令执行和守护进程

    执行shell脚本有以下几种方式 1.相对路径方式,需先cd到脚本路径下 [root@banking tmp]# cd /tmp [root@banking tmp]# ./ceshi.sh 脚本执行 ...

  7. CodeForces - 434D Nanami's Power Plant

    Codeforces - 434D 题目大意: 给定一个长为n的序列,序列中的第i为上的值\(x_i\),序列第i位上的值\(x_i\in[l_i,r_i]\),价值为\(f_i(x_i)\),其中\ ...

  8. 京东ie6中轮播模块小图出现在大图上

    请大家给个评论,给个支持!呵呵 本人最新一套模版小清新童装母婴日韩风全屏轮播(上线风暴),在审核时审核失败,报的是“ie6中全屏海报轮播是小图出现在大图中间的兼容性错误” 而本人本机出现的是小图基本上 ...

  9. .Net 学习资源整理

    01.Visual Studio 隐藏的财富 --- C# 语言规范 安装完Visual Studio之后,我们好像忽略了,微软给我们准备的<C# 语言规范>. 路径参考下图: 02.MS ...

  10. 如何使用代码美化器Uncrustify (How to use code beautifier Uncrustify)

    1.下载NodePad++, 2.选择菜单Plugins/Plugin Manager/Show Plugin Manager 3.勾选UniversalIndentGUI,点击Install 4.下 ...