先上例子!

 <script type="text/javascript">
console.log('博');
setTimeout(function(){
console.log('客');
},0);
console.log('园');
</script>

我们在html中插入这样一段代码,然后去控制台看看会是什么结果?

哎哟!什么情况,预想中的博客园呢?js不是单线程语言吗(从上到下执行)?按道理应该是博客园呀!--OK,这正式引出了我说的问题,js的运行机制。

首先js为什么是单线程?这要从js的诞生说起,早年js被发明出来是干嘛用的?主要是用于表单验证、页面交互、DOM的增改。试想一下要是你一边在操作一个元素,一边js又在删除它,那岂不是乱套了吗?所以js注定一次只能干一件事,再大再重要的事情要么你就排到前面来,要么你就给我等着。。。

但是,我印象中的js没有这么low呀!ajax不就是可以实现请求丢出去以后,等到服务器响应再来调取事件吗?--OK 这里看起来视乎与单线程有点矛盾……我们接着看。

js的任务队列

如果我们把上面的代码看成是一个js执行任务的队列,那么console.log就是一个同步任务,而setTimeout就是一个异步任务。在js的运行机制中当执行到异步任务时会被挂起,等到同步任务执行完成后才会去响应异步任务,所以我们在刚刚的代码后边再加点内容。

 <script type="text/javascript">
console.log('博');
setTimeout(function(){
console.log('客');
},0);
console.log('园');
console.log('5');
console.log('2');
console.log('0');
</script>

打印结果来看看

看见没‘客’永远都是放在最后去执行!上文说到同步任务没有执行完,就不会去执行异步,那如果同步任务一直不能执行完呢?我们再看!

 <script type="text/javascript">
console.log('博');
for(var i = 1; i>0; i++){ };
setTimeout(function(){
console.log('客');
},0);
console.log('园');
console.log('5');
console.log('2');
console.log('0');
</script>

再看打印结果!

看见没,控制台始终只会显示‘博’,因为对于js来说我们同步任务没有做完(你永远也做不完!)

综上,在js中同步任务没有完成前,任何异步任务是不会被浏览器响应的。

我们继续接着看,上代码!

 <script type="text/javascript">
for(var i=0; i<5; i++){
setTimeout(function(){
console.log(i);
},1000)
};
</script>

先想想这个结果应该是多少呢?

这个……………………………………

想要知道为什么会是这个结果我们要先了解一个概念Event Loop 事件循环!

什么是事件循环?我先来画个图,画出来你就明白了!

图虽然有点丑………………但是能够说明问题。

回到上一个问题,for循环是一个同步事件,当js运行到setTimeout的时候会被拿出来,注意!!!这个时候setTimeout既不在运行栈也不在任务队列中,而是1秒以后才会被放入到任务队列。当运行栈的同步事件执行完成后,js才会开始执行setTimeout。而这个时候for循环体早已经完成了!当运行栈空了以后又会去任务队列中拿取任务,如此往复循环!

最后我们看看那些操作可能触发js异步任务:

1、setTimeout、 setInterval

2、DOM事件

3、ES6中的Promise

用一个小例子来谈谈javascript的运行机制的更多相关文章

  1. java连接mysql的一个小例子

    想要用java 连接数据库,需要在classpath中加上jdbc的jar包路径 在eclipse中,Project的properties里面的java build path里面添加引用 连接成功的一 ...

  2. java操作xml的一个小例子

    最近两天公司事比较多,这两天自己主要跟xml打交道,今天更一下用java操作xml的一个小例子. 原来自己操作xml一直用这个包:xstream-1.4.2.jar.然后用注解的方式,很方便,自己只要 ...

  3. MVVM模式的一个小例子

    使用SilverLight.WPF也有很长时间了,但是知道Binding.Command的基本用法,对于原理性的东西,一直没有深究.如果让我自己建一个MVVM模式的项目,感觉还是无从下手,最近写了一个 ...

  4. 使用Trinity拼接以及分析差异表达一个小例子

    使用Trinity拼接以及分析差异表达一个小例子  2017-06-12 09:42:47     293     0     0 Trinity 将测序数据分为许多独立的de Brujin grap ...

  5. 简述JavaScript的运行机制

    想要理解JavaScript的运行机制,需要分别深刻理解以下几个点: · JavaScript的单线程机制 · 任务队列(同步任务和异步任务) · 事件和回调函数 · 定时器 · Event Loop ...

  6. 浅谈javascript的运行机制

    积累一下这几天学的,记录一下: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程 ...

  7. 从一个小例子认识SQL游标

    1    什么是游标: 关系数据库中的操作会对整个行集起作用. 例如,由 SELECT 语句返回的行集包括满足该语句的 WHERE 子句中条件的所有行. 这种由语句返回的完整行集称为结果集. 应用程序 ...

  8. 关于SVN配置文件的一个小例子

    1   背景假设 厦门央瞬公司是一家电子元器件设备供应商,其中有个ARM部门,专门负责ARM芯片的方案设计.销售,并在北京.上海各设立了一个办事处.对于工作日志,原先采用邮件方式发给经理,但是这种方式 ...

  9. Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期

    学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看 ...

随机推荐

  1. word的xml文件中给文字添加超链

    <w:hlink w:dest="http://xxx.com"><w:r></w:r></wr></w:hlink>& ...

  2. ExclusiveTouch

    Setting this property to true causes the receiver to block the delivery of touch events to other vie ...

  3. P2540 斗地主增强版

    P2540斗地主增强版 参考大佬题解 思路:顺子暴力搜,剩下的牌我不会贪心所以用记忆化搜索(或者dp): 注意:双王不能当对,二不算顺子 代码 #include <cstdio> #inc ...

  4. Linux/Windows 平台最容易安装 Composer教程

    我们采用的是全局安装方式,这样的话,就能够在命令行窗口中直接执行 composer 命令了. Mac 或 Linux 系统: 打开命令行窗口并执行如下命令将前面下载的 composer.phar 文件 ...

  5. 命令提示符下的WQL

    WQL就是英文WMI Query Language的缩写,就是说wmic这个命令支持简单的一些SQL查询,我们以实例来讲解他的部分用法,这个命令过于强大,因此以下只是该命令的冰山一角. 列出本地连接的 ...

  6. [转] Linux中的默认权限与隐藏权限(文件、目录)

    [From] https://blog.csdn.net/davidsky11/article/details/25424615 一个文件(或目录)拥有若干个属性,包括(r/w/x)等基本属性,以及是 ...

  7. archlinux安装tftp

    1. 安装  [guo@archlinux ~]$ sudo pacman -S tftp-hpa 2. 启用  [guo@archlinux ~]$ systemctl start tftpd.se ...

  8. android 微信 SDK 分享

    1.资源依赖: https://open.weixin.qq.com/cgi-bin/showdocument?action=doc&id=open1419319167&t=0.613 ...

  9. 《The One 团队》第二次作业:团队项目选题

    项目 内容 作业所属课程 http://www.cnblogs.com/nwnu-daizh/ 作业要求 https://www.cnblogs.com/nwnu-daizh/p/10726884.h ...

  10. 转 oracle ASM中ASM_POWER_LIMIT参数

    https://daizj.iteye.com/blog/1753434 ASM_POWER_LIMIT 该初始化参数用于指定ASM例程平衡磁盘所用的最大权值,其数值范围为0~11,默认值为1.该初始 ...