文章导航

JavaScript 异步操作原理

2018-12-7 01:04| 作者: admin| 查看: 1746| 评论: 0|来自: 蚂蚁部落

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

一.异步操作:

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

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

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

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

二.异步操作原理:

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

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

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

(1).JavaScript引擎。

(2).界面渲染。

(3).浏览器事件

(4).http(s)请求

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

aid[2664]

图示说明:

(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语句是一个死循环,所以回调函数永远得不到执行。

3

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (3 人)

最新评论

返回顶部