你必须知道的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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
你必须知道的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
linux下 C语言对 php 扩展
2008/12/14 PHP
优化PHP程序的方法小结
2012/02/23 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
详解Python 最短匹配模式
2020/07/29 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
刊首寄语大全
2014/04/11 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
劳模事迹材料范文
2014/12/24 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
如何在C++中调用Python
2021/05/21 Python
html5调用摄像头截图功能
2022/01/18 Javascript
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis