先看一段代码:

  1. var start = new Date();
  2. setTimeout(function(){
  3. var end = new Date();
  4. console.log("Time elapsed: ", end - start, "ms");
  5. }, 500);
  6. while (new Date - start <= 1000)
  7. {
  8. }

运行这段脚本可以看到:Time elapsed的值大概在1001ms左右,肯定会超过1000ms。也就是说:setTimeout失效了,指定的函数并没有在500ms后执行,而是延迟到1000ms后才执行。

再看一段代码:

  1. function a()
  2. {
  3. setTimeout(function(){console.log(1);},0);
  4. console.log(2);
  5. }
  6. a();

运行这段脚本可以看到:先打印2后打印1,我们在setTimeout里面指定了0ms,希望能立即执行,但是实际上没有效果。

想要理解上面的2段代码,我们得了解一下JavaScript中setTimeout的实现原理。首先牢记一点:JavaScript 是单线程执行的,也就是无法同时执行多段代码。下面这段解释来自这篇博客

        JavaScript是单线程执行的,无法同时执行多段代码。当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列。一旦当前任务执行完毕,再从队列中取出下一个任务,这也常被称为 “阻塞式执行”。所以一次鼠标点击,或是计时器到达时间点,或是Ajax请求完成触发了回调函数,这些事件处理程序或回调函数都不会立即运行,而是立即排队,一旦线程有空闲就执行。假如当前 JavaScript线程正在执行一段很耗时的代码,此时发生了一次鼠标点击,那么事件处理程序就被阻塞,用户也无法立即看到反馈,事件处理程序会被放入任务队列,直到前面的代码结束以后才会开始执行。如果代码中设定了一个 setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为 0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

 

也就是说setTimeout只能保证在指定的时间过后将任务(需要执行的函数)插入队列等候,并不保证这个任务在什么时候执行。执行javascript的线程会在空闲的时候,自行从队列中取出任务然后执行它。javascript通过这种队列机制,给我们制造一个异步执行的假象。

  1. var start = new Date();
  2. setTimeout(function(){
  3. var end = new Date();
  4. console.log("Time elapsed: ", end - start, "ms");
  5. }, 500);
  6. console.log("task finished.");

我们之所以会感觉到这段代码是在异步执行,这是因为javascript线程并没有因为什么耗时操作而阻塞,所以可以很快地取出排队队列中的任务然后执行它。

现在我们知道了setTimeout的原理了,现在看下setTimeout(0)的使用场景。下面这个例子来自这篇文章

  1. <input type="text" onkeydown="show(this.value)">
  2. <div></div>
  3. <script type="text/javascript">
  4. function show(val) {
  5. document.getElementsByTagName('div')[0].innerHTML = val;
  6. }
  7. </script>

这里绑定了 keydown 事件,意图是当用户在文本框里输入字符时,将输入的内容实时地在 <div> 中显示出来。但是实际效果并非如此,可以发现,每按下一个字符时,<div> 中只能显示出之前的内容,无法得到当前的字符。

  1. <input type="text" onkeydown="var self=this; setTimeout(function() {show(self.value)}, 0)">
  2. <div></div>
  3. <script type="text/javascript">
  4. function show(val) {
  5. document.getElementsByTagName('div')[0].innerHTML = val;
  6. }
  7. </script>

这段代码使用了setTimeout(0)就可以实现需要的效果了。这里其实涉及2个任务,1个是将键盘输入的字符回写到输入框中,一个是获取文本框的值将其写入div中。第一个是浏览器自身的默认行为,一个是我们自己编写的代码。很显然,必须要先让浏览器将字符回写到文本框,然后我们才能获取其内容写到div中,如果立即执行获取文本框的值,其实输入框还没有输入的内容。改变顺序,这这正是setTimeout(0)的作用。

原文链接:http://blog.csdn.net/aitangyong/article/details/46800615

尽管setTimeout的delay是0,也会作为一次异步调用,而每次异步调用结束后都会render页面

setTimeout的实现原理以及setTimeout(0)的使用场景的更多相关文章

  1. javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景

    在今天之前我一直以为setTimeout这个函数是异步的,无意中看到了一篇关于setTimeout的文章.发现自己曾经的认识全是错误的,赶紧总结下. 先看一段代码: var start = new D ...

  2. setTimeout,setInterval原理

    function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...

  3. setTimeout的核心原理和巧用

    你所不了解的setTimeout 发表于 2015年11月23日 by 愚人码头 被浏览 14,756 次 分享到: 0 小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue ...

  4. Apache kafka原理与特性(0.8V)

    前言: kafka是一个轻量级的/分布式的/具备replication能力的日志采集组件,通常被集成到应用系统中,收集"用户行为日志"等,并可以使用各种消费终端(consumer) ...

  5. 【转载】Apache kafka原理与特性(0.8V)

    http://blog.csdn.net/xiaolang85/article/details/37821209 前言: kafka是一个轻量级的/分布式的/具备replication能力的日志采集组 ...

  6. 结合 category 工作原理分析 OC2.0 中的 runtime

    绝大多数 iOS 开发者在学习 runtime 时都阅读过 runtime.h 文件中的这段代码: struct objc_class { Class isa  OBJC_ISA_AVAILABILI ...

  7. Spark的RDD原理以及2.0特性的介绍

    转载自:http://www.tuicool.com/articles/7VNfyif 王联辉,曾在腾讯,Intel 等公司从事大数据相关的工作.2013 年 - 2016 年先后负责腾讯 Yarn ...

  8. JAVA的JVM虚拟机工作原理.V.1.0.0

    注意:一下内容纯属个人理解,如有错误,欢迎批评指正. (90度弯腰)谢谢. java在JVM上的运行过程: 1,编辑好的java代码(IDE无报错,测试运行无错误): 2,java源代码通过javac ...

  9. kafka系列九、kafka事务原理、事务API和使用场景

    一.事务场景 最简单的需求是producer发的多条消息组成一个事务这些消息需要对consumer同时可见或者同时不可见 . producer可能会给多个topic,多个partition发消息,这些 ...

随机推荐

  1. jeesite模块解析,功能实现

    做为十分优秀的开源框架,JeeSite拥有着很多实用性的东西. 默认根路径跳转 定义了无Controller的path<->view直接映射 <mvc:view-controller ...

  2. Apache https 证书配置...

    没啥好说的..赋值粘贴 !! Listen 443 SSLSessionCache "shmcb:/apache/logs/ssl_scache(512000)" SSLSessi ...

  3. 【字典树】【树】【二进制】bzoj1954/POJ3764The xor-longest Path 题解

        建立字典树是异或的一种处理方法. Description In an edge-weighted tree, the xor-length of a path p is defined as ...

  4. HDU6395(分段+矩阵快速幂)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=6395 给你一个式子,给出你A,B,C,D,P,n,让你求出第n项的式子Fn.(其中ABCDPn均在1e9的 ...

  5. 关于jstl taglib的错误 Can not find the tag library descriptor for “http://java.sun.com/jstl/core”

    在查了N个帖子之后,决定记录一下关于jstl taglib的配置方法. 首先我遇到的错误是: Can not find the tag library descriptor for "htt ...

  6. Mysql5.7不区分大小写设置

    1.编辑mysql配置文件my.cnf 2.在[mysqld]下添加一行 lower_case_table_names=1#0表示区分大小写,1表示不区分大小写

  7. JENKINS安装及新建用户,权限配置

    JENKINS安装及新建用户,权限配置 1. 下载安装 jenkins 官网地址https://jenkins.io/index.html 下载地址https://jenkins.io/downloa ...

  8. TCP字节流与UDP数据报(转)

    关于TCP和UDP的分次发送和接收的问题,困惑了两天,看到这篇文章豁然开朗. 原文链接:http://network.51cto.com/art/201310/413326.htm “TCP是一种流模 ...

  9. C++ Memory System Part2: 自定义new和delete

    在第一部分中,我们介绍了new / delete的具体用法和背后的实现细节,这次我们将构建我们自己的小型工具集,可以使用我们自定义的allocator类来创建任意类型的实例(或者实例数组),我们需要做 ...

  10. php中的$_GET如何获取带有“#”的参数

    <?php echo $_GET['key']; ?> 当url为http://test.com/c.php?key=999时,正常输出:999 当url为http://test.com/ ...