你必须知道的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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
javascript 得到变量类型的函数
May 19 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 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
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
Add a Table to a Word Document
2007/06/15 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
python自动安装pip
2014/04/24 Python
Python标准异常和异常处理详解
2015/02/02 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python版名片管理系统
2018/11/30 Python
Python Subprocess模块原理及实例
2019/08/26 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
python三引号如何输入
2020/07/06 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
客服文员岗位职责
2013/11/29 职场文书
单位提档介绍信
2014/01/17 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
手残删除python之后的补救方法
2021/06/26 Python
JavaScript前端面试组合函数
2022/06/21 Javascript