先上例子!

 <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. NFS共享服务

    一.网络文件系统共享服务 NFS( Network File System,网络文件系统 )是一种基于TCP/IP传输的网络文件系统协议,最初由SUN公司开发,通过使用NFS协议,客户机可以像访问本地 ...

  2. JPush Android 推送如何区分开发、生产环境

    我们 Android 开发者在使用极光推送时可能会发现,在通过官方控制台进行推送时.只有 iOS 区分了开发和生产环境,而 Android 则没有.但实际开发中又确实经常需要针对开发和生产环境分别来推 ...

  3. Oracle 中wmsys.wm_concat拼接字符串,结果过长报错解决

    备忘:这个函数最大是4000,根据拼接列的长度,通过限制拼接条数来防止拼接字符串过长错误 --这个情况是从子表中读取出具,这里直接把它当做查询字段处理,在子表中有所有数据 select info.id ...

  4. spring里面的ioc的理解?

    spring里面的ioc就是控制反转,其实现核心是DI(依赖注入),控制反转不向以前java代码里面,通过new关键字来实现创建对象,这样每段代码之间的耦合度就比较高,为了降低每个小模块之间的耦合度, ...

  5. 微信朋友圈评论/回复/cell/键盘谈起

    微信朋友圈评论功能的细节考虑及实现       微信朋友圈回复tableview iOS 实现微信朋友圈评论回复功能(一)

  6. 【sql server】"已更新或删除的行值要么不能使该行成为唯一行,要么改变了多个行" 解决方案

    #事故现场: 1.在手动修改某表中数据是,出现如下错误提示:  已更新或删除的行值要么不能使该行成为唯一行,要么改变了多个行 2.表结构及数据: #解决方法: 1.原因分析:提示被删除的行不是唯一行, ...

  7. 进阶篇:5.1)极值法(Worst Case ,WC)

    本章目的:了解极值法,运用极值法: 1.极值法定义 极值法(WC,Worse Case):极值法是考虑零件尺寸最不利的情况,通过尺寸链中尺寸的最大值或最小值来计算关键尺寸的值: 计算公式: 2.极值法 ...

  8. HDU 5442 后缀自动机(从环字符串选定一个位置 , 时针或顺时针走一遍,希望得到字典序最大)

    http://acm.hdu.edu.cn/showproblem.php?pid=5442 题目大意: 给定一个字符串,可理解成环,然后选定一位置,逆时针或顺时针走一遍,希望得到字典序最大,如果同样 ...

  9. 让windows登陆界面显示administrator账户

    如果windowsXP只有一个administrator账户,在开机登陆windows的欢迎界面,会出现这个账户名,点击,输入密码就可登陆到windows桌面: 如果新建了另一个管理员账户,在欢迎界面 ...

  10. 使用maven搭建ssm框架的javaweb项目

    目前主流的javaweb项目,常会用到ssm(Spring+Spring MVC+Mybatis)框架来搭建项目的主体框架,本篇介绍搭建SSM框架的maven项目的实施流程.记之共享! 一.SSM框架 ...