你必须知道的Javascript知识点之"单线程事件驱动"的使用


Posted in Javascript onApril 23, 2013
 var intervalBody = function(){
     console.log('interval');
 } var startInterval = function(){
     setInterval(intervalBody,1000);
 }
 var timeoutBody = function(){
     console.log('timeout');
 }
 var startTimeout = function(){
     setTimeout(timeoutBody,1000);
 }
 var sleep = function(second){
     var current = new Date().setSeconds(new Date().getSeconds() + second);
     while(new Date() < current){ }
 }
 startInterval();
 startTimeout();
 sleep(2);
 console.log('sleep once');
 sleep(2);
 console.log('sleep again');

执行结果

你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用

发生了什么事情

你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用

执行规则规则1

事件驱动的单线程模型,所有javascript的代码都在一个线程中执行,javascript线程从事件队列中一次取出一个事件进行执行。

规则2

宿主中除了javascript线程外,还有定时器线程(setInterval和setTimeout会触发这两个线程执行)、浏览器事件触发线程(这个线程会触发onclick、onmousemove和其它浏览器事件)、AJAX请求线程;所有这些线程触发的事件(回调)都会加入到事件队列的尾部。

规则3

当浏览器加载完html文档后,会将当前html的所有的js代码作为事件队列的第一个事件,其它线程触发的事件(回调)都会加入到事件队列的尾部。

你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用

规则4

setTimeout和setInterval中的回调的执行时间肯定是大于为其指定的秒数。

浏览器渲染线程

假如javascript执行线程执行了A事件,在A事件执行的过程中修改了DOM,这些DOM的修改不会立即反应到界面上,而是当A事件执行完毕后,javascript线程会被阻塞,这时浏览器渲染线程会渲染DOM的修改结果,等浏览器渲染线程执行完毕后,javascript线程才继续运行。

代码示例

var sleep = function(second){
     var current = new Date().setSeconds(new Date().getSeconds() + second);
     while(new Date() < current){ }
 } document.body.innerHTML = '段光伟';
 sleep(5);
Javascript 相关文章推荐
JavaScript中的排序算法代码
Feb 22 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
jQuery取id有.的值的方法
May 21 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jquery实现倒计时功能
Dec 28 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 #Javascript
jquery清空textarea等输入框实现代码
Apr 22 #Javascript
js计算精度问题小结
Apr 22 #Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 #Javascript
用js实现小球的自由移动代码
Apr 22 #Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 #Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 #Javascript
You might like
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python获取当前计算机cpu数量的方法
2015/04/18 Python
python写日志封装类实例
2015/06/28 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
html5与css3小应用
2013/04/03 HTML / CSS
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
中学生自我鉴定
2014/02/04 职场文书
军训考核自我鉴定
2014/02/13 职场文书
家长通知书家长评语
2014/04/17 职场文书
核心价值观演讲稿
2014/05/13 职场文书
应届生自荐书
2014/06/23 职场文书
单位考核聘任报告
2015/03/02 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
windows server2008 开启端口的实现方法
2022/06/25 Servers