经典例子辅助理解setTimeout工作原理

运行结果:

约1秒后输出:1,
再过约1秒后输出:2,
接着才立即输出:时间流逝了: 2002 毫秒
最后输出:时间又流逝了: 2003 毫秒

在现有浏览器环境中,Javascript执行引擎是单线程的,主线程的语句和方法,会阻塞定时任务的运行,在Javascript执行引擎之外,存在一个任务队列,当在代码中调用setTimeout()方法时,注册的延时方法会挂到浏览器内核其他模块处理,当延时方法到达触发条件,即到达设置的延时时间时,该模块再将要执行的方法添加至该模块的任务队列中。这一过程与执行引擎主线程独立,执行引擎在主线程方法执行完毕,到达空闲状态时,才会从该模块的任务队列中顺序提取任务来执行,这期间的时间,可能大于注册任务时设置的延时时间;

浏览器在空闲状态下,会不断的尝试从模块的任务队列中提取任务,这称为事件循环模型;

再回头看下前面的代码,第二个setTimeout()的延迟方法的延迟时间是10毫秒,比第一个要早触发啊!为什么执行结果却在后面?因为它被之前的代码阻塞了约1000.5~1001毫秒了(视浏览器的处理速度),等他挂到处理模块,等到触发时间添加进任务队列时,第一个setTimeout()的延迟方法早就被添加到模块的任务队了,而引擎主线程是按顺序提取得,所以,你应该懂了吧?

再来一个例子

运行结果:

 首先是console.log出来的是 ”0“,这个是毫无疑问的,然后再alert出”100“。

setTimeout运行机制简要理解的更多相关文章

  1. 我对asp.net运行机制的理解

    有一本书叫<asp.net 本质论>,作者名叫冠军.我看了几次,都没有坚持看下来.这次连续看完了前三章,然后参考网上的资料,总结下我对.net运行机制的理解. 先上两张图: 看着这两张图, ...

  2. js setTimeout运行机制

    在开始之前先看个面试例子 为什么会是0 1 2 2,而不是 0 0 1 1 再来看个例子 输出结果是4个undefined,为何不是1,2,3,4? 这是为什么呢,这是因为setTimeout是异步的 ...

  3. 浏览器UI多线程及JavaScript单线程运行机制的理解

    在上一篇博客中,我对jQuery的队列(queue)机制和动画(animate)机制做了一个深入的解析,在animate的实现机制其核心是依靠queue来完成的,其中在jQuery的链式调用部分,之前 ...

  4. 如何通过setTimeout理解JS运行机制详解

    setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...

  5. setTimeout传参 和 运行机制

    1.setTimeout 传参数 setTimeout还允许添加更多的参数.它们将被传入推迟执行的函数(回调函数) 上面代码中,setTimeout共有4个参数.最后那两个参数,将在1000毫秒之后回 ...

  6. 深入理解JavaScript运行机制

    深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...

  7. 从setTimeout谈JavaScript运行机制

    从setTimeout说起 众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执 ...

  8. JavaScript 运行机制详解:深入理解Event Loop

    Philip Roberts的演讲<Help, I'm stuck in an event-loop>,详细.完整.正确地描述JavaScript引擎的内部运行机制. 一.为什么JavaS ...

  9. javascript的运行过程以及setTimeout的运行机制

    关于javascript的运行机制大家都应该有所了解了吧,其实javascript是一个单线程的机制,但是因为队列的关系它的表现会让我们感觉是一个多线程的错觉.javascript在运行的时候是这样的 ...

随机推荐

  1. SCOI2019d1t1平台跳跃[高精]

    分析 首先考虑相邻柱子之间没有浮台. 记前 \(m-1\) 个盘子为 x, 第 \(m\) 个盘子为 y,有如下过程:\(x\rightarrow C, y\rightarrow B, x\right ...

  2. java----牛客练习

    1. 形式参数就是函数定义时设定的参数.例如函数头 int min(int x,int y,int z) 中 x,y,z 就是形参.实际参数是调用函数时所使用的实际的参数.   真正被传递的是实参   ...

  3. Python—函数的名称空间

    名称空间 又名name space, 顾名思义就是存放名字的地方,存什么名字呢?举例说明,若变量x=1,1存放于内存中,那名字x存放在哪里呢?名称空间正是存放名字x与1绑定关系的地方 名称空间共3种, ...

  4. from bs4 import BeautifulSoup 报错

    一: BeautifulSoup的安装: 下载地址:https://www.crummy.com/software/BeautifulSoup/bs4/download/4.6/ 下载后,解压缩,然后 ...

  5. c++入门之浅入浅出类——分享给很多想形象理解的人

    引入类之前,首先引入一个古老的话题:类别,比如int ,char ,double:这些基本的类型方便了我们描述数据(请注意,这句话很重要),类型的存在就是为了方便我们描述数据的.而c++中的类其实作用 ...

  6. Springboot+Redis 配置和使用

    pom.xml 引入redis 开启缓存 <!-- cache --> <dependency> <groupId>org.springframework.boot ...

  7. scrapy之五大核心组件

    scrapy之五大核心组件 scrapy一共有五大核心组件,分别为引擎.下载器.调度器.spider(爬虫文件).管道. 爬虫文件的作用: a. 解析数据 b. 发请求 调度器: a. 队列 队列是一 ...

  8. 福州大学软件工程1816 | W班 第4次作业(团队展示)成绩排名

    作业链接 评分细则 队员姓名与学号(标记组长),其中4-7人一组,特殊情况经老师允许后可以突破限制:(1分) 队名(体现项目内容,并要求有亮点与个性):(1分) 拟作的团队项目描述:一句话(中英文不限 ...

  9. MySQL Limit优化(转)

    原文:http://bbs.landingbj.com/t-0-240894-1.html 首先,我们看一个分页SQL: SELECT time,pageFROM `l_not_200_page`WH ...

  10. mybatis两种开发方式

    本文首先讲解从JDBC到mybatis的演变过程,然后是使用mybatis进行开发的两种方式. 一 JDBC的使用及其优化 1.使用JDBC进行数据库操作 加载JDBC驱动: 建立并获取数据库连接: ...