说到setTimeout写过javascript的伙伴们一定不会陌生,去银行办过存取款业务的伙伴一定对取号机不会陌生。今天群里有个好伙伴在问setTimeout的问题,大伙你一言我一语,讲了很多,可是她听了之后还是不理解。我先不说她的问题,请先回忆一下,去银行或医院排队的时候,是不是要先去机器上取一个号码呀。也不知从几何时,取号机就开始流行起来了。不过这也确实是好事,不用一直站在那里排呀排,而且可以知道前面有多少人排在我前面,因此大可以放心的坐在椅子上刷微博,玩微信。等到叫你手中的号码时,就轮到你了。这个我相信大多数人都玩过,就不细说了。下面我要说的这个问题,或许可以用上面的情景来类比,以帮助理解。当然,比的不好,也可以吐槽。

for(var i=0;i<10;i++){
var id = setTimeout(function(){
console.log(id);
},1000); }

那么问题来了,这个id是干嘛用的,为什么输出了10个4144 ?

首先查了一下w3c,上面对setTimeout是这么解释的:setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。关于它的返回值解释在度娘上很少,或许是我搜的问题,最近google要翻墙才能用了,不爽。我也不管他娘是怎么给它定义的,反正理解成系统分配给它的号码就行了,简单粗暴。这个号码与浏览器当前的运行环境有关。所以你运行上面的代码,不一定是这个数字. 这就好比同一个人去每个银行的取号机上拿到的号码不一定相同是一个道理。

学过计算机原理的人一般都会知道,cpu一次只能做一件事情,它把忙不过来的任务放在缓存区,比如优先级最高的排在一级缓存,次要的排在二级缓存,再次要的放内存,最后是硬盘。总之呢,是要排队一个一个的处理。cpu怕忙乱了,于是呢给每一个任务都排了一个号码,取一个专业点的名字,叫id,这样叫到谁,谁就开始执行。有时候,某些任务会被用户取消。比如岛国片看到一半,女朋友突然回来了,急忙关掉播放器。这时系统就会告诉cpu,播放岛国片的那个id用户取消了,cpu就跳过这个id不做了。 这就和取号机是一样样的,如果你取了号,又临时有事走了。广播叫的那个号码被你拿走了,你又不在。自然就不管你了。关于这个id七七八八就写了这么多,也不知道看官您整明白了没有。

下面接着说那个输出10个4144的问题。其实这个问题是一个老生常谈的问题了,本质上都是异步的问题。

我上面说了,setTimeout用于在指定的毫秒数后做某事,而for循环里边是当前立即开始要做的事。我们的cpu虽然一次只能做一件事,但是它的速度是很快的,一秒钟都可以完成N多件事情(N等于一个很大的数)。上面的代码等价于:

var id;
for(var i=0;i<10;i++){
id = setTimeout(function(){
console.log(id);
},1000);
}

所以当第一个setTimeout执行的时候,for循环早就完成了,id的值也就是最后那个setTimeout返回的id。 所以输出10个一样的id值,也就不足为怪了。

如果想要查看每一个setTimeout返回的id是多少,直接这样写就可以了:

var id;
for(var i=0;i<10;i++){
id = setTimeout(function(){
//console.log(id);
},1000);
console.log(id)
}

虽然setTimeout里边的任务是指定时间后执行,但是它的id值是即时返回的,就比如你取号的时候,不管要过久才能轮到你,但是只要你点了取号机,它就会立即打印给你。

这个过程是同步的。当然,关于setTimeout还有很多知识点,也有很多坑,但是只要注意它这里有个异步的问题,大多数情况都可以避免。

本篇是原创,如果对你有帮助,请点击 推荐,如果有什么地方有疑问,欢迎跟贴探讨。

setTimeout与取号机之间的关系的更多相关文章

  1. UNICODE与UTF8和GBK之间的关系

    http://wenku.baidu.com/link?url=bheGEzfSjEx-QX-ciME5oKooKYE08_NJZ02l2kKFa7kVZJ4t8Ks2uSNByovgP2QL6btq ...

  2. struts2(四) ognl表达式、值栈、actionContext之间的关系

    今天来说说ognl表达式在struts2中的运用. --wh 一.什么是Ognl? 通过百度百科查询到的解释,其中详细的说明了OGNL的作用. 下面我们就对OGNL这5个作用进行讲解 1.存取对象的任 ...

  3. 探索未知种族之osg类生物---状态树与渲染树以及节点树之间的关系

    节点树 首先我们来看一个场景构建的实例,并通过它来了解一下“状态节点”StateGraph 和“渲染叶”RenderLeaf 所构成的状态树,“渲染台”RenderStage 和“渲染元”Render ...

  4. Struts2学习(四)———— ognl表达式、值栈、actionContext之间的关系

    一.什么是Ognl? 通过百度百科查询到的解释,其中详细的说明了OGNL的作用. 下面我们就对OGNL这5个作用进行讲解 1.存取对象的任意属性,简单说就是对javabean进行操作(重要) 2.调用 ...

  5. JPA概述以及它和Hibernate之间的关系

    http://www.cnblogs.com/Kevin-ZhangCG/p/8996491.html 一.JPA概述以及它和Hibernate之间的关系 1.1.Hibernate 概述 JPA J ...

  6. 五、hibernate表与表之间的关系(一对多关系)

    数据库表与表之间的关系 一对多:一个学校可以有多个学生,一个学生只能有一个学校 多对多:一个学生可以有多个老师,一个老师可以教多个学生 一对一:一个人只能有一个身份证号,一个身份证号只能找到一个人 一 ...

  7. php CGI、Fastcgi、PHP-FPM的详细介绍与之间的关系

    以下PHP CGI.Fastcgi.PHP-FPM的一些信息归纳和汇总----->详细介绍与之间的关系 一:CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的 web ...

  8. 关于计算机的ID和用户ID之间的关系

    关于计算机的ID和用户ID之间的关系 计算机安装完系统后就会生成计算机ID,然后系统会以计算机ID为前缀附加数字创建Administrator(500)和Guest(501)用户ID,其他用户的ID将 ...

  9. 并发用户数与 TPS 之间的关系

    1.  背景 在做性能测试的时候,很多人都用并发用户数来衡量系统的性能,觉得系统能支撑的并发用户数越多,系统的性能就越好:对TPS不是非常理解,也根本不知道它们之间的关系,因此非常有必要进行解释. 2 ...

随机推荐

  1. 给li标签添加自定义属性

    给li标签添加属性<ul> <li></li> <li></li> <li></li> <li>< ...

  2. java分享第十四天(TestNG Assert详解)

     TestNG Assert 详解org.testng.Assert 用来校验接口测试的结果,那么它提供哪些方法呢? 中心为Assert测试类,一级节点为方法例如assertEquals,二级结点为参 ...

  3. SQL 查找重复项及批量修改数据成固定格式

    1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断select * from peoplewhere peopleId in (select   peopleId  from ...

  4. CentOS 7 防止端口自动关闭

    tl;dr firewall-cmd --permanent --zone=public --add-port=2888/tcp firewall-cmd --reload #重新载入服务 永久配置f ...

  5. 李洪强iOS经典面试题156 - Runtime详解(面试必备)

    李洪强iOS经典面试题156 - Runtime详解(面试必备)   一.runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C ...

  6. 复习排序with javascript

    最近又翻看了一下数据结构(数据结构学渣). 以前总是看不懂,连冒泡和选择排序都要纠结半天,后来才慢慢有意识能区分开来. 当真的理解了快速排序之后,才觉得,这是个很赞的排序,很容易理解. 于是简单的,模 ...

  7. 命令行操作svn和git和git

    前几天在写代码的时候电脑突然坏掉,老大交代的任务没完成,非常痛恨自己用svn或者git保存代码,相信很多程序员遇到过,硬盘坏掉,存在硬盘中的代码丢失,无法找回的问题,svn和git可谓程序员界的福音, ...

  8. SQL初步知识点

    varchar(n) 长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储大小为输入数据的字节的实际长度,而不是 n 个字节. nva ...

  9. An internal error occurred during: "Launching PmallSearch on Tomcat 7.x". java.lang.NullPointerException

    如果出现了上述的错误按照如下的3个步骤解决:1.首先关闭MyEclipse工作空间.2.然后删除工作空间下的“/.metadata/.plugins/org.eclipse.core.runtime/ ...

  10. HTML基础篇之知识点补充和拓展

    <tbody>标签 <tbody>如果表格内容非常多的时候,如果加上这个标签它会让这个表格全部下载好才会显示.用在表格标签上面. 如果您使用 thead.tfoot 以及 tb ...