JavaScript 异步操作原理

小灰灰 2020-06-01 13:03 736阅读 0赞

# JavaScript 异步操作原理

本文只简述JavaScript异步原理，并不会对细节做过多介绍。

**一.异步操作：**

与异步操作对应的是同步操作。

所谓同步操作，就是同一时刻只能做一件事情，如果要多件事情需要处理，需要排队。

异步操作是同一时刻能够做多件事情，比如银行开多个窗口同时办理业务。

JavaScript中常见一个异步操作是，当ajax异步向服务器请求数据的同时，可以继续处理其他事务。

**二.异步操作原理：**

JavaScript虽然是单线程的，好像不能实现异步操作。

然而它的运行环境浏览器是多线程的，这是实现异步的决定性因素。

浏览器可以包含如下主要线程：

（1）.JavaScript引擎。

（2）.界面渲染。

（3）.浏览器事件

（4）.http(s)请求

下面是一张网络上比较关于此方面比较著名的图片：

![](/images/1591016762505.png)

图示说明：

（1）.tn：表示不同的时刻。

（2）.tn下方方块：表示tn时刻正在执行或者将要执行的代码。

**异步原理解析：**

（1）.界面渲染：

大家知道JavaScript代码默认会阻塞代码的执行，自然包括界面的渲染。

因为JavaScript代码可以操作界面的内容，所以要等待代码执行完毕再去渲染。（2）.定时器函数：

JavaScript中有两个定时器函数，分别是setTimeout与setInterval。

这两个函数都可以进行时间计数，但是需要注意的是，计数功能并不是由JavaScript引擎完成。

因为JavaScript是单线程的，如果有其他任务在执行，那就无法计数了，所以定时器也是异步的。

（3）.图示分析：

t1时刻正在执行一个回调函数，t2时刻通过点击触发click事件，浏览器事件也是一个独立的线程，所以同样是异步操作，将事件处理函数放入执行队列。click事件处理函数不会立刻执行，而是要等待t1时刻的代码执行完毕。随着时间的推移，定时器函数的回调函数不断放入队列等待执行。也就是说，定时器与事件等操作都是异步的，当时放入JavaScript引擎线程的代码还是要排队执行的。举个简单的例子：

```javascript
setTimeout(function(){
  console.log("蒲公英云");
},1000)
while(true){
  //code
}
```

代码的初衷是1000毫秒后打印字符串"蒲公英云"，所以会首先执行while语句。

在执行while语句的同时，计数器正常计数（因为它不属于JavaScript引擎线程，不会被堵塞）。

到达1000毫秒后，定时器将会回调函数放入JavaScript引擎线程队列。

然而，while语句是一个死循环，所以回调函数永远得不到执行。

发表评论取消回复

表情：

评论列表（有 0 条评论，736人围观）

还没有评论，来说两句吧...

相关阅读

相关【异步系列一】一篇文章理清JavaScript中的异步操作原理

前言 javaScript 语言的执行环境是单线程。也就是指一次只能完成一个任务，如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。这种模式虽然实现

Myth丶恋晨/ 2024年04月06日 11:25/ 0 赞/ 62 阅读

相关 JavaScript中的异步操作

JavaScript引擎有多个线程，单个脚本只能在主线程运行，其他线程都在后台配合。单线程模式虽然对JavaScript构成了很大的限制，但也因此使它具备了其他语言不具备

﹏ヽ暗。殇╰゛Y/ 2022年09月05日 00:12/ 0 赞/ 160 阅读

相关 JavaScript异步编程

简介 JavaScript是一种单线程执行的脚本语言，为了不让一段JavaScript代码执行时间过久，阻塞UI的渲染或者是鼠标事件处理，通常会采用一种异步的[编程][Lin

港控/mmm°/ 2022年08月26日 14:12/ 0 赞/ 203 阅读

相关 JavaScript 异步编程

异步编程 Async JavaScript 在 Node 面前获得前所未有的重视。本文结合 Trevor Burnham 所著 [《Async JavaScript Build

我会带着你远行/ 2022年08月11日 03:24/ 0 赞/ 208 阅读

相关 JavaScript入门教程笔记(15)-异步操作

1 单线程模型单线程模型是指，JavaScript只在一个线程上运行，同时只能执行一个任务。但是，这不是说JavaScript引擎只有一个线程，事实上，JavaSc

た入场券/ 2022年04月01日 13:00/ 0 赞/ 218 阅读

相关 JavaScript异步实战

JavaScript异步系列的篇章到今天为止已经完结了,从回调函数 => Promise => Generator => async,现在呢我们再用同一个例子，分别用这几种异步

迷南。/ 2022年03月28日 11:39/ 0 赞/ 281 阅读

相关 JavaScript异步目录

JavaScript异步目录友情链接：[点击查看所有文章目录][Link 1] 1. [《谈一谈JavaScript异步》][JavaScript] 2. [《J

蔚落/ 2022年03月27日 08:09/ 0 赞/ 256 阅读

相关 JavaScript工作原理和Node异步I/O

1. 什么是JavaScript解析引擎？简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比如var

Bertha 。/ 2021年12月01日 14:54/ 0 赞/ 165 阅读

相关异步操作

async function async1()\{ console.log('async1 start'); await async2(); console.log('a

柔光的暖阳◎/ 2021年11月23日 16:10/ 0 赞/ 303 阅读

相关 JavaScript 异步操作原理

JavaScript 异步操作原理与异步操作对应的是同步操作。所谓同步操作，就是同一时刻只能做一件事情，如果要多件事情需要处理，需要排队。异步操作是同一时刻能够做...

小灰灰/ 2020年06月01日 13:03/ 0 赞/ 737 阅读