分析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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
javascript中的delete使用详解
Apr 11 Javascript
js 自动播放的实例代码
Nov 19 Javascript
JavaScript函数详解
Nov 17 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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 MemCached 高级缓存应用代码
2010/08/05 PHP
php简单实现MVC
2015/02/05 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
php扩展开发入门demo示例
2019/09/23 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
Python解析树及树的遍历
2016/02/03 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
python推导式的使用方法实例
2021/02/28 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
光盘行动倡议书
2014/02/02 职场文书
户外拓展活动方案
2014/02/11 职场文书
实习评语大全
2014/04/26 职场文书
公司门卫工作职责
2014/06/28 职场文书
市场营销工作计划书
2014/09/15 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
培训心得体会怎么写
2016/01/25 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS