分析JS单线程异步io回调的特性


Posted in Javascript onDecember 01, 2017

我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺枪!

起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等.

在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定了一个事件回调函数 doCheck().

当鼠标点击这个元素的时候,触发了事件,马上执行事件绑定函数并回.

再后来是接触到jquery 的时候,大量的

$("#id").click(function(){
alert('点击事件');
});

这种jquery的语法写的越来越多似乎已经习惯了,但是你是都留意过前面的选择器只是选择过滤dom节点,接着的click就是一个事件注册,而里面的 function(){} 其实是一个参数,事件绑定函数的参数,这里面就要求你熟悉javascript的语法了.

function在javascript中是一个对象,对象就可以指世界的万事万物,所以对象可以包含很多属性,方法等.

既然是对象,那就可以当做一个参数去传递,这种函数叫做 高阶函数.

而且这种函数没有定义名称对不对,当然你可以一个名称,然后把名称传过来也是一样的,但是没有意义,因为这里的函数对象其实是一个形参,所以我们习惯的不给这种函数起名字,这就是常说的匿名函数.

接着上面的$("#id").click 说起,当点击事件被触发时,就要执行事件绑定函数.和上面直接在dom上给定onclick方法是一样的效果.

假设浏览器里有多个线程去操作脚本的话,你能想象到他的乱吗? 线程一正要去修改元素A的value值,结果没想到线程二已经把元素A从dom树删除节点,这时线程一只好操作失败报错.这样的情况是不糟透了,要么浏览器无维护多个线程数据的一致性,要么前端工程师自己去维护,所以......浏览器只有一个线程去操作dom,这样省去了很多不必要的麻烦.

setTimeout(function(){
alert('弹出');
},300);

while(true){
	........
}

你觉得 300毫秒后 alert('弹出') 还有戏吗?

没有了,永远没有戏了,等待300毫秒只是骗取你的感情的.因为浏览器是单线程模式执行脚本.

一旦线程处于死循环模式下去执行 while 语句,你的setTimeout 再也不会起任何作用了.

进而我们走入了 node.js 世界,它完全保留了javascript在浏览器的特性,单线程异步回调,也正是因为这个特点它才是它,假如node.js 是一门同步语言,就算所有的npm包都是 c++ 扩展的(速度够快吧)再快你也比不过c语言处理速度是不是,那么node.js可能还没有出世就已经被php鄙视了.

正是因为它的异步回调IO,更能提高他的效率,让我想起以前学校的一种快餐店和学校食堂的对比情况:

食堂是所有学生拿着盘子在窗口排成一字型队,打饭的妹妹一个一个盛好了,挨个端上饭走了.这是同步处理结果.

学校快餐店也是学生排队点餐,但是点完餐拿上你的呼叫器就可以离开找位置去了.这样单位时间内服务员可以为很多人提供服务,而且点好餐的同学可以找位置做自己其他事情,而不用傻傻地站到窗口等饭,直到你的饭出来的那一刹那,服务器会根据单号按下编码,这时你桌上的呼叫器会响起,你去取餐就好了.这是异步处理.那个呼叫器响起就是触发事件.

单线程可以减少多线程之间状态切换引起的资源浪费和维护困难,当然也有专门的第三方包来支持多核多线程的情景,你可以自己权衡.

以上就是关于JS单线程回调的全部信息内容,如有大家在学习的时候还有其他的疑问,可以在下面的留言区域讨论。

Javascript 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 #Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 #Javascript
利用babel将es6语法转es5的简单示例
Dec 01 #Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 #Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 #Javascript
浅谈angular4实际项目搭建总结
Dec 01 #Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 #Javascript
You might like
用PHP读注册表
2006/10/09 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
JS变量及其作用域
2017/03/29 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
python实现划词翻译
2020/04/23 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python爬取某平台短视频的方法
2021/02/08 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
学校运动会开幕演讲稿
2014/01/04 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
小学教师办公室制度
2014/02/03 职场文书
促销活动总结怎么写
2014/06/25 职场文书
2014年会计工作总结
2014/11/27 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL