setTimeout运行机制简要理解
经典例子辅助理解setTimeout工作原理

运行结果:
约1秒后输出:1,
再过约1秒后输出:2,
接着才立即输出:时间流逝了: 2002 毫秒
最后输出:时间又流逝了: 2003 毫秒
在现有浏览器环境中,Javascript执行引擎是单线程的,主线程的语句和方法,会阻塞定时任务的运行,在Javascript执行引擎之外,存在一个任务队列,当在代码中调用setTimeout()方法时,注册的延时方法会挂到浏览器内核其他模块处理,当延时方法到达触发条件,即到达设置的延时时间时,该模块再将要执行的方法添加至该模块的任务队列中。这一过程与执行引擎主线程独立,执行引擎在主线程方法执行完毕,到达空闲状态时,才会从该模块的任务队列中顺序提取任务来执行,这期间的时间,可能大于注册任务时设置的延时时间;
浏览器在空闲状态下,会不断的尝试从模块的任务队列中提取任务,这称为事件循环模型;
再回头看下前面的代码,第二个setTimeout()的延迟方法的延迟时间是10毫秒,比第一个要早触发啊!为什么执行结果却在后面?因为它被之前的代码阻塞了约1000.5~1001毫秒了(视浏览器的处理速度),等他挂到处理模块,等到触发时间添加进任务队列时,第一个setTimeout()的延迟方法早就被添加到模块的任务队了,而引擎主线程是按顺序提取得,所以,你应该懂了吧?
再来一个例子

运行结果:
首先是console.log出来的是 ”0“,这个是毫无疑问的,然后再alert出”100“。
setTimeout运行机制简要理解的更多相关文章
- 我对asp.net运行机制的理解
有一本书叫<asp.net 本质论>,作者名叫冠军.我看了几次,都没有坚持看下来.这次连续看完了前三章,然后参考网上的资料,总结下我对.net运行机制的理解. 先上两张图: 看着这两张图, ...
- js setTimeout运行机制
在开始之前先看个面试例子 为什么会是0 1 2 2,而不是 0 0 1 1 再来看个例子 输出结果是4个undefined,为何不是1,2,3,4? 这是为什么呢,这是因为setTimeout是异步的 ...
- 浏览器UI多线程及JavaScript单线程运行机制的理解
在上一篇博客中,我对jQuery的队列(queue)机制和动画(animate)机制做了一个深入的解析,在animate的实现机制其核心是依靠queue来完成的,其中在jQuery的链式调用部分,之前 ...
- 如何通过setTimeout理解JS运行机制详解
setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...
- setTimeout传参 和 运行机制
1.setTimeout 传参数 setTimeout还允许添加更多的参数.它们将被传入推迟执行的函数(回调函数) 上面代码中,setTimeout共有4个参数.最后那两个参数,将在1000毫秒之后回 ...
- 深入理解JavaScript运行机制
深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...
- 从setTimeout谈JavaScript运行机制
从setTimeout说起 众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执 ...
- JavaScript 运行机制详解:深入理解Event Loop
Philip Roberts的演讲<Help, I'm stuck in an event-loop>,详细.完整.正确地描述JavaScript引擎的内部运行机制. 一.为什么JavaS ...
- javascript的运行过程以及setTimeout的运行机制
关于javascript的运行机制大家都应该有所了解了吧,其实javascript是一个单线程的机制,但是因为队列的关系它的表现会让我们感觉是一个多线程的错觉.javascript在运行的时候是这样的 ...
随机推荐
- 2018年JavaScript现状报告
前言 JavaScript(后面统称JS)在过去五年得到飞速地增长,早期JS实现类似微博的“点赞”这样的功能都需要刷新一次页面. 后来开发者通过JS来制作SPA(单页面应用程序),在浏览器加载一次,后 ...
- Python股票分析系列——系列介绍和获取股票数据.p1
本系列转载自youtuber sentdex博主的教程视频内容 https://www.youtube.com/watch?v=19yyasfGLhk&index=4&list=PLQ ...
- 窥探ASP.Net MVC底层原理 实现跨越Session的分布式TempData
1.问题的引出 我相信大家在项目中都使用过TempData,TempData是一个字典集合,一般用于两个请求之间临时缓存数据或者页面之间传递消息.也都知道TempData是用Session来实现的,既 ...
- lambda函数
1.lambda函数是语法简短的匿名函数 2.lambda函数可以接受一个或多个参数 3.lambda函数只能有一个表达式 4.一般用于非重用的代码块 1)g = lambda x : x**2 g( ...
- 二、xadmin----简单使用
1.中文设置: settings.py中直接配置: LANGUAGE_CODE = "zh-hans" TIME_ZONG = "Asia/Shanghai" ...
- Python-模块导入-63
模块导入: # 内置模块 # 扩展的 django # 自定义的 # 文件 # import demo # def read(): # print('my read func') # demo.rea ...
- Python类与对象的理解
注意python的类对象与实例对象的区分 类对象与实例对象是相对的,例如:a=1,那么a就是int的一个实例对象,这里的a相对于int来说,a是实例对象,int是类对象.但是int同时又是type的实 ...
- CF892.B. Wrath
---恢复内容开始--- 题意: 有n个犯人,手上都有个长度为Li的武器,当铃响时大家同时挥动武器,只能把前面攻击范围内的敌人杀死,问最后还剩几个人. 题目传送门: [http://codeforce ...
- Python_服务器与多客户端通信、UDP协议、pycharm打印带颜色输出、时间同步的机制
1.服务器与多客户端通信 import socket # 创建tcp socket的套接字 sk = socket.socket() # bind sk.bind(('127.0.0.1',8080) ...
- js数据放入缓存,需要再调用
再贴代码之前先描述下,这个技术应用的场景:一个页面的http请求次数能少点就少,这样大大提高用户体验.所以再一个页面发起一个请求,把所有数据都拿到后储存在缓存里面,你想用的时候再调用出来,这个是非常好 ...