我们都知道js是一个单线程的语言,所以没办法同时执行俩个进程。所以我们就会用到异步。

异步的形式有哪些那,es5的回调函数。es6的promis等

异步的运行原理我们可以先看下面这段代码

应该很多人都知道这个打印的值是10个10.

也有知道当我们执行的for循环的时候,他会把for循环执行完成以后再去执行setTimeout,在执行setTimeout的时候这是时候的i已经变成了10所以就打印10个10。

但是这里面的执行过程是这样的。我们用一个图来做解释

图画的有点丑啊,大致的执行流程就是这样。

在js执行的时候,我们在主线程执行的好好的,然后遇到了一个回调函数,然后他会把这个回调函数异步处理,就是放到事假队列中。

然后我们主线程接着去执行,当主线程执行完成以后,在去执行事件队列里的函数。然后进行返回。

在事件队列里,不存在从上到下进行执行。他会看那一个先执行完成,就直接返回那一个。

什么意思呢。我们看下面这个代码

执行结果为1然后2

当js执行的时候。这俩个会放进事件队列。js是从上往下执行。

所以他会先把1放入事件队列中,然后在放入2.

这就可以看出在事件队列中,谁先执行完成,就返会谁到主线程上。

这也是异步的一个执行过程

js异步执行原理的更多相关文章

  1. 浅析JS异步执行机制

    前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面.本文将针对JS异步执行机制进行一个简单的分析. 从一份代码讲起 下面是两个经典的JS定时执行函数,这两个函数的区别相信对JS有 ...

  2. js 异步执行顺序

    参考文章: js 异步执行顺序   1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...

  3. js异步执行 按需加载 三种方式

    js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...

  4. JS异步执行之setTimeout 0的妙用

    最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的 ...

  5. co.js异步回调原理理解

    co.js是基于es6的generator实现的,相当于generator函数的一个自动执行器 generator的简单介绍 function* fn(){ before() yield firstY ...

  6. Node.js异步IO原理剖析

    为什么要异步I/O? 从用户体验角度讲,异步IO可以消除UI阻塞,快速响应资源 JavaScript是单线程的,它与UI渲染共用一个线程.所以在JavaScript执行的时候,UI渲染将处于停顿的状态 ...

  7. 异步执行js脚本——防止阻塞

    JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaS ...

  8. 【JS】js引擎执行过程

    概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...

  9. 关于js预编译以及js文件执行顺序的几个问题。

    关于js的执行原理,除去html页面中直接添加的代码,js代码的放置可以分为两类. //情形a           <script type="text/javascript" ...

随机推荐

  1. Code Walkthroughs Table API

    上级:https://www.cnblogs.com/hackerxiaoyon/p/12747387.html Table API Table api 有批量的api和流实时的api.通常很容易进行 ...

  2. 【秒懂Java】【第1章_初识Java】02_软件开发

    通过上一篇文章<01_编程语言>,我们了解到 Java是众多编程语言中的其中一种 编程语言可以用来开发软件 因此,我们即将要学习的Java技术,是属于软件开发的范畴.那软件开发的前景如何呢 ...

  3. JavaScript基础-自己定义自己的函数(016)

    把一个函数对象赋值给变量后,就可以通过这个变量再次定义函数,甚至可以在一个函数内部再次定义它自己: var scareMe = function () { alert("Boo!" ...

  4. Python之浅谈绑定方法

    目录 绑定方法和非绑定方法 绑定方法 对象的绑定方法 类的绑定方法 非绑定方法 总结 绑定方法和非绑定方法 类中定义的方法大致可以分为两类:绑定方法和非绑定方法.其中绑定方法又可以分为绑定到对象的方法 ...

  5. 半导体质量管理_Stargate

    监控您的SPC活动 生产质量指标概述 应定期评估统计信息,以便您可以更好地利用统计过程控制.通过这种方式,您可以快速发现质量缺陷并采取适当的措施做出反应.LineWorks STARGATE提供了生产 ...

  6. 《算法笔记》6.6小节 问题 A: 任务调度

    这道题我一开始看到的时候,想到的是拓补排序,可是这么菜又这么懒的我怎么可能用呢,既然出现在优先队列里面,那么久一定和他有关了 可是并没有使用优先队列 思路: 对于这道题,我们肯定是对他们定义优先级,然 ...

  7. 程序员的修炼-我们为什么会编写BUG

    在最近的一周,我维护的业务系统出现了很多坏毛病,一周七天crash掉了4次,每次都需要都是因为一点很小的问题,触发了蝴蝶效应,导致整个系统全盘崩溃,于是产生除了叙述本篇的想法,当然这并不是为了掩盖我在 ...

  8. Android 用视频做页面背景

    不知道怎么开头,直接代码. xml:RelativeLayout布局,MyVideoView放在第一位,其他的放到之下就可以. <MyVideoView android:id="@+i ...

  9. Python3笔记019 - 4.4 字典

    第4章 序列的应用 python的数据类型分为:空类型.布尔类型.数字类型.字节类型.字符串类型.元组类型.列表类型.字典类型.集合类型 在python中序列是一块用于存放多个值的连续内存空间. py ...

  10. SpringMVC+Spring+Hibernate个人家庭财务管理系统

    项目描述 Hi,大家好,今天分享的项目是<个人家庭财务管理系统>,本系统是针对个人家庭内部的财务管理而开发的,大体功能模块如下: 系统管理模块 验证用户登录功能:该功能主要是验证用户登录时 ...