说到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. MSSQL数据库表加锁

    所指定的表级锁定提示有如下几种: 1. HOLDLOCK: 在该表上保持共享锁,直到整个事务结束,而不是在语句执行完立即释放所添加的锁. 2. NOLOCK:不添加共享锁和排它锁,当这个选项生效后,可 ...

  2. router路由去掉#!的踩坑记

    项目中在研究去掉router#!的过程中的踩坑过程.

  3. python Django 进阶篇

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  4. 最短路(代码来源于kuangbin和百度)

    最短路 最短路有多种算法,常见的有一下几种:Dijstra.Floyd.Bellman-Ford,其中Dijstra和Bellman-Ford还有优化:Dijstra可以用优先队列(或者堆)优化,Be ...

  5. 整理一自己不怎么熟悉的HTML标签(会陆续更新)

    ---恢复内容开始--- 小白刚开始接触HTML和CSS,在学习过程中发现又遇到很多不认识的标签,于是就想把他们都记录下来,一来可加深记忆,二来也方便以后查阅,当然如果能帮助到你们也是很开心的啦! 1 ...

  6. 使用JDBC的批处理功能

    package cn.itcast.jdbc; import java.sql.Connection; import java.sql.Date; import java.sql.PreparedSt ...

  7. Java工作环境笔记

    环境 1. Jvm最简生存指南: http://www.importnew.com/10127.html 2. 所有路径中,不要出现中文,即使开始的时候,调试Tomcat时,路径有中文也可以,你真不知 ...

  8. EQueue - 一个纯C#写的分布式消息队列介绍2

    一年前,当我第一次开发完EQueue后,写过一篇文章介绍了其整体架构,做这个框架的背景,以及架构中的所有基本概念.通过那篇文章,大家可以对EQueue有一个基本的了解.经过了1年多的完善,EQueue ...

  9. Google分布式构建软件之一:获取源代码

    本文原文在google开发者工具组的博客上[需要FQ],以下是我的翻译,欢迎转载,但尊重作者版权,注名原文地址. 在Google,所有的产品都是在主干上开发的.这样的好处:每个人都可以查看和修改代码, ...

  10. django开发个人简易Blog—nginx+uwsgin+django1.6+mysql 部署到CentOS6.5

    前面说完了此项目的创建及数据模型设计的过程.如果未看过,可以到这里查看,并且项目源码已经放大到github上,可以去这里下载. 代码也已经部署到sina sea上,地址为http://fengzhen ...