js异步执行原理

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

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

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

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

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

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

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

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

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

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

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

执行结果为1然后2

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

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

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

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

原文地址:https://www.cnblogs.com/chenyudi/p/12630702.html

时间: 2024-10-01 09:33:16

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

node js 异步执行流程控制模块Async介绍

1.Async介绍 sync是一个流程控制工具包,提供了直接而强大的异步功能.基于Javascript为Node.js设计,同时也可以直接在浏览器中使用. Async提供了大约20个函数,包括常用的 map, reduce, filter, forEach 等,异步流程控制模式包括,串行(series),并行(parallel),瀑布(waterfall)等. 项目地址:https://github.com/caolan/async 2. Async安装 npm install async 3.

浅析JS异步执行机制

前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面.本文将针对JS异步执行机制进行一个简单的分析. 从一份代码讲起 下面是两个经典的JS定时执行函数,这两个函数的区别相信对JS有一定基础的同学是十分清楚的.timeout仅仅只会执行一次,而interval则会执行多次. setTimeout(function (args) { console.log('timeout') }, 1000); setInterval(function (args) { console.log

JS异步执行之setTimeout 0的妙用

最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然没有问题.如果遇到可以并发执行的业务逻辑,再排队就很低级了,所以需要异步执行! 1.什么是异步? setTimeout(function(){ console.log(0); },0) console.log(1); // 先打印 1 // 再打印 0 比方说有些饭店你去吃饭

简单说下异步执行原理。

计算机程序执行分为同步执行,和异步执行: 所谓的异步执行,是一种特殊的程序的执行方式,常见的异步程序有 定时器(setInterval),延时器(setTimeou),各种事件的绑定(onclick......),ajax请求 异步程序的执行过程 1.从第一行代码开始执行 2.同步程序开始执行 3.遇到异步程序了,暂时不执行,将异步程序暂时存储在“异步池”中 4.所有的同步程序执行完毕 5.开始执行“异步池”中的异步程序 若有设定了时间的程序,就会先执行到点了的程序 若有设定的时间是相同的程序,

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

JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaScript可以查询和修改DOM和CSSOM JavaScript的执行阻塞了CSSOM的执行 JavaScript 阻塞了DOM的形成,除非特殊声明js异步执行 js是一个同步语言可以修改网页的任何方面: <html> <head> <meta name="viewpo

通过一个简单闭包,弄懂JS执行原理

<script> function f1()            {                var age = 18; function f2()                {                    alert('我今年:'+age+'岁');                } return f2;            }                var func3 = f1(); func3();</script>            闭包

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

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

js异步之间执行的顺序

今天同事问了一个问题,怎么让ajax中的回调(保持异步)先执行,再让普通的function执行... 整了个解决办法: 如下: <!DOCTYPE html> <html> <head> <title>lhy1</title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"><

ASP.NET MVC下的异步Action的定义和执行原理

Visual Studio提供的Controller创建向导默认为我们创建一个继承自抽象类Controller的Controller类型,这样的Controller只能定义同步Action方法.如果我们需要定义异步Action方法,必须继承抽象类AsyncController.这篇问你讲述两种不同的异步Action的定义方法和底层执行原理.[本文已经同步到<How ASP.NET MVC Works?>中] 目录 一.基于线程池的请求处理 二.两种异步Action方法的定义     XxxAs