php异步轮询如何实现,深入剖析JavaScript异步之事件轮询

本篇文章给大家带来的内容是关于深入剖析JavsScript异步之事件轮询,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

JavsScript 是一门单线程的编程语言,这就意味着一个时间里只能处理一件事,也就是说 JavaScript 引擎一次只能在一个线程里处理一条语句。

虽然单线程简化了编程代码,因为你不必太担心并发引出的问题,这也意味着你将在阻塞主线程的情况下执行长时间的操作,如网络请求。

想象一下从API请求一些数据,根据具体的情况,服务器需要一些时间来处理请求,同时阻塞主线程,使网页长时间处于无响应的状态。

这就是引入异步 JavaScript 的原因。使用异步 JavaScript(如 回调函数、promise、async/await),可以不用阻塞主线程的情况下长时间执行网络请求 :)

可能你知道不知道 异步 JavsScript 是如何工作,并不要紧,但知道它是如何工作,对 JavaScript 异步更深入的了解是有帮助的。

所以不在啰嗦了,我们开始吧 :)

同步JavaScript是如何工作的?

在深入研究异步JavaScript之前,让我们首先了解同步 JavaScript 代码如何在 JavaScript 引擎中执行。例如:const second = () => {

console.log('Hello there!');

}

const first = () => {

console.log('Hi there!');

second();

console.log('The End');

}

first();

要理解上述代码如何在 JavaScript 引擎中执行,我们必须理解执行上下文和调用堆栈(也称为执行堆栈)的概念。

函数代码在函数执行上下文中执行,全局代码在全局执行上下文中执行。每个函数都有自己的执行上下文。

调用栈

调用堆栈顾名思义是一个具有LIFO(后进先出)结构的堆栈,用于存储在代码执行期间创建的所有执行上下文。

JavaScript 只有一个调用栈,因为它是一种单线程编程语言。调用堆栈具有 LIFO 结构,这意味着项目只能从堆栈顶部添加或删除。

让我们回到上面的代码片段,并尝试理解代码如何在JavaScript引擎中执行。const second = () => {

console.log('Hello there!');

}

const first = () => {

console.log('Hi there!');

second();

console.log('The End');

}

first();

9338ead151cb5132be00c25669541219.png

这里发生了什么?

当执行此代码时,将创建一个全局执行上下文(由main()表示)并将其推到调用堆栈的顶部。当遇到对first()的调用时,它会被推送到堆栈的顶部。

接下来,console.log('Hi there!')被推送到堆栈的顶部,当它完成时,它会从堆栈中弹出。之后,我们调用second(),因此second()函数被推到堆栈的顶部。

console.log('Hello there!')被推送到堆栈顶部,并在完成时弹出堆栈。second() 函数结束,因此它从堆栈中弹出。

console.log(“the End”)被推到堆栈的顶部,并在完成时删除。之后,first()函数完成,因此从堆栈中删除它。

程序在这一点上完成了它的执行,所以全局执行上下文(main())从堆栈中弹出。

异步JavaScript是如何工作的?

现在我们已经对调用堆栈和同步JavaScript的工作原理有了基本的了解,让我们回到异步JavaScript。

阻塞是什么?

让我们假设我们正在以同步的方式进行图像处理或网络请求。例如:const processImage = (image) => {

/**

* doing some operations on image

**/

console.log('Image processed');

}

const networkRequest = (url) => {

/**

* requesting network resource

**/

return someData;

}

const greeting = () => {

console.log('Hello World');

}

processImage(logo.jpg);

networkRequest('www.somerandomurl.com');

greeting();

做图像处理和网络请求需要时间,当processImage()函数被调用时,它会根据图像的大小花费一些时间。

processImage() 函数完成后,将从堆栈中删除它。然后调用 networkRequest() 函数并将其推入堆栈。同样,它也需要一些时间来完成执行。

最后,当networkRequest()函数完成时,调用greeting()函数,因为它只包含一个控制台。日志语句和控制台。日志语句通常很快,因此greeting()函数立即执行并返回。

因此,我们必须等待函数(如processImage()或networkRequest())完成。这意味着这些函数阻塞了调用堆栈或主线程。因此,在执行上述代码时,我们不能执行任何其他操作,这是不理想的。

那么解决办法是什么呢?

最简单的解决方案是异步回调。我们使用异步回调使代码非阻塞。例如:const networkRequest = () => {

setTimeout(() => {

console.log('Async Code');

}, 2000);

};

console.log('Hello World');

networkRequest();

这里我使用了setTimeout方法来模拟网络请求。请记住setTimeout不是JavaScript引擎的一部分,它是web api(在浏览器中)和C/ c++ api(在node.js中)的一部分。

为了理解这段代码是如何执行的,我们必须理解更多的概念,比如事件轮询和回调队列(或消息队列)。

2ff94aadb06073f744291b28bb7b5d9a.png

事件轮询、web api和消息队列不是JavaScript引擎的一部分,而是浏览器的JavaScript运行时环境或Nodejs JavaScript运行时环境的一部分(对于Nodejs)。在Nodejs中,web api被c/c++ api所替代。

现在让我们回到上面的代码,看看它是如何异步执行的。const networkRequest = () => {

setTimeout(() => {

console.log('Async Code');

}, 2000);

};

console.log('Hello World');

networkRequest();

console.log('The End');

98f07cb62fab6f01cbe84af953568d3e.gif

当上述代码在浏览器中加载时,console.log(' Hello World ') 被推送到堆栈中,并在完成后弹出堆栈。接下来,将遇到对 networkRequest() 的调用,因此将它推到堆栈的顶部。

下一个 setTimeout() 函数被调用,因此它被推到堆栈的顶部。setTimeout()有两个参数:1) 回调和

2) 以毫秒(ms)为单位的时间。

setTimeout() 方法在web api环境中启动一个2s的计时器。此时,setTimeout()已经完成,并从堆栈中弹出。cosole.log(“the end”) 被推送到堆栈中,在完成后执行并从堆栈中删除。

同时,计时器已经过期,现在回调被推送到消息队列。但是回调不会立即执行,这就是事件轮询开始的地方。

事件轮询

事件轮询的工作是监听调用堆栈,并确定调用堆栈是否为空。如果调用堆栈是空的,它将检查消息队列,看看是否有任何挂起的回调等待执行。

在这种情况下,消息队列包含一个回调,此时调用堆栈为空。因此,事件轮询将回调推到堆栈的顶部。

然后是 console.log(“Async Code”) 被推送到堆栈顶部,执行并从堆栈中弹出。此时,回调已经完成,因此从堆栈中删除它,程序最终完成。

消息队列还包含来自DOM事件(如单击事件和键盘事件)的回调。例如:document.querySelector('.btn').addEventListener('click',(event) => {

console.log('Button Clicked');

});

对于DOM事件,事件侦听器位于web api环境中,等待某个事件(在本例中单击event)发生,当该事件发生时,回调函数被放置在等待执行的消息队列中。

同样,事件轮询检查调用堆栈是否为空,并在调用堆栈为空并执行回调时将事件回调推送到堆栈。

延迟函数执行

我们还可以使用setTimeout来延迟函数的执行,直到堆栈清空为止。例如const bar = () => {

console.log('bar');

}

const baz = () => {

console.log('baz');

}

const foo = () => {

console.log('foo');

setTimeout(bar, 0);

baz();

}

foo();

打印结果:foo

baz

bar

当这段代码运行时,第一个函数foo()被调用,在foo内部我们调用console.log('foo'),然后setTimeout()被调用,bar()作为回调函数和时0秒计时器。

现在,如果我们没有使用 setTimeout, bar() 函数将立即执行,但是使用 setTimeout 和0秒计时器,将bar的执行延迟到堆栈为空的时候。

0秒后,bar()回调被放入等待执行的消息队列中。但是它只会在堆栈完全空的时候执行,也就是在baz和foo函数完成之后。

ES6 任务队列

我们已经了解了异步回调和DOM事件是如何执行的,它们使用消息队列存储等待执行所有回调。

ES6引入了任务队列的概念,任务队列是 JavaScript 中的 promise 所使用的。消息队列和任务队列的区别在于,任务队列的优先级高于消息队列,这意味着任务队列中的promise 作业将在消息队列中的回调之前执行,例如:const bar = () => {

console.log('bar');

};

const baz = () => {

console.log('baz');

};

const foo = () => {

console.log('foo');

setTimeout(bar, 0);

new Promise((resolve, reject) => {

resolve('Promise resolved');

}).then(res => console.log(res))

.catch(err => console.log(err));

baz();

};

foo();

打印结果:foo

baz

Promised resolved

bar

我们可以看到 promise 在 setTimeout 之前执行,因为 promise 响应存储在任务队列中,任务队列的优先级高于消息队列。

小结

因此,我们了解了异步 JavaScript 是如何工作的,以及调用堆栈、事件循环、消息队列和任务队列等概念,这些概念共同构成了 JavaScript 运行时环境。虽然成为一名出色的JavaScript开发人员并不需要学习所有这些概念,但是了解这些概念是有帮助的:)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ECMAScript 实现继承的几种方式

1. 原形链 function Father() { this.fatherName "licus"; } function Children() { this.chidrenName "king"; } Children.prototype new Father(); 2.借用构造函数 function Father() { this.fatherName "licus"; } function Children() {…

微信小程序php实现登陆的代码,微信小程序实现微信登录

步骤:1.调用wx.login得到code返回的结果示例:{code:"051nI5Pa1XJkDs0773Pa1OWYOa1nI5PF"errMsg:"login:ok"}2.拿code换取session_key与openid这里使用服务端来请求,以php为例$code $this->input->post(code);$jso…

《C++ Primer Plus(第六版)》(25)(第十三章 类继承 笔记)

1.派生类构造函数的要点: 首先创建基类对象; 应通过成员初始化列表将基类的初始化信息传递给基类的构造函数; 派生类构造函数应初始化新增的数据成员 2.首先执行派生类的析构函数,然后自动调用基类的析构函数. 3.基类指针可以在不进行显式类型转换的情况下指向派生类对象,基类引…

php实际应用小例子,PHP4实际应用经验篇(6)

现在,你已经明白PHP允许你嵌套条件语句。然而,如果你再看看那个用来示范此概念的例子时你将同意那是既复杂又令人感到可怕。--------------------------------------------------------------------------------if($day"Thursday"){if($time&q…

electron知识点

1.打开chrome开发工具栏: BrowserWindow.openDevTools(); 转载于:https://www.cnblogs.com/cag2050/p/6227987.html

oracle 12c缩容磁盘组,oracle 表收缩

当使用delete表数据后,空间无法释放,可以使用表收缩释放表空间;注意:当delete表大量数据的时候要注意undo,可以使用:alter table emp nologging; 让其不生产日志一、表的增长方式当表被创建后&#xff0…

php解决与处理网站高并发 大流量访问的方法

方法/步骤 首先,确认服务器硬件是否足够支持当前的流量 普通的P4服务器一般最多能支持每天10万独立IP,如果访问量比这个还要大, 那么必须首先配置一台更高性能的专用服务器才能解决问题 ,否则怎么优化都不可能彻底解决性能问题。 …

oracle 自动表分析,Oracle自动分析索引,表

--分析表REATE OR REPLACE PROCEDURE analyze_tables IS--rec integer;v_date1 number(10);v_date2 number(10);V_SQL varchar2(512);v_msg varchar2(512);BEGINFOR rec IN (SELECT table_name FROM user_tables)LOOPv_date1 : dbms_utility.get_time;V_SQL : ANALYZE TABLE |…

JavaScript 函数(作用域以及闭包)

JavaScript 函数(作用域以及闭包) ・执行环境及作用域 执行环境定义了变量或函数有权访问的其他数据。 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量或函数都保存在这个对象中, 虽然我们编写的代码无法访问这个对…

十天学会PHP(第五版),十天学会php之第五天

十天学会php之第五天学习目的:学会读取数据先看两个函数:1、mysql_query送出一个 query 字符串。 语法: int mysql_query(string query, int [link_identifier]); 返回值: 整数本函数送出 query 字符串供 MySQL 做相关的处理或者执行。若没有指定 link_i…

《DSP using MATLAB》第6章开始了

看到第6章了,标记一下,全书近一半,继续加油 构建滤波器的三种元件: 下面是函数floor和size的部分帮助截图 转载于:https://www.cnblogs.com/ky027wh-sx/p/6235509.html

codeql php,使用codeql 挖掘 ofcms

前言网上关于codeql的文章并不多,国内现在对codeql的研究相对比较少,可能是因为codeql暂时没有中文文档,资料也相对较少,需要比较好的英语功底,但是我认为在随着代码量越来越多,传统的自动化漏洞挖掘工具的…

谈谈个人代码对团队合作影响

这几天正接手一个项目,属于后期功能拓展,要拓展这个项目,一定程度上要看到源码的部分,然后烦心的事情就来了,这代码写的真是让人挺无语的,原先写完整个项目的是已有多年工作经验的开发者,但是整…

php 连接符.,PHP怎么在数字之间添加连接符

PHP实现数字之间添加连接符,我们可以通过PHP中的for循环思想来实现。这里的连接符指的是“-”符号。推荐参考:《PHP教程》那么对于新手来说,可能有一定难度。下面我们就通过简单的代码示例,给大家介绍PHP给数字之间添加连字符的实…

linux怎么安装git服务器,linux下安装git服务端

[rootm2 ~]# yum install -y epel-*[rootm2 ~]# yum install -y git创建仓库目录[rootm2 ~]# mkdir /mnt/githome初始化目录[rootm2 ~]# git init --bare /mnt/githome/添加一个git用户,用来给开发者通过ssh访问git仓库 (git-shell是禁止服务器登录)[rootm2 ~]# use…

Linux —— 常用命令集合

关机和重启命令 shutdown [选项] 时间 (添加&,把关机任务放在后台执行) 只有shutdown可以保存关机时资源 操作选项 重启: r 关机: h 取消一个关机任务: c 关机命令(不安全) halt poweroff init 0 (系统运行级别) 重启命令 reboot init 6 (系统运行级别…

嵌入式linux 时间同步,解决嵌入式Linux中的时区问题

如果说让我做上层软件的工作,我做起来可以得心应手,但是让我做平台方面的工作(系统问题解决、驱动编写、软件移植等工作),确实不熟悉。所以很多问题都是摸着石头过河,没有经验。许多问题在有经验的朋友那里是小菜一碟,…

安装zabbix及LNMP的平台的搭建

Zabbix3.0.3安装文档 环境rhel 5.8 IP:192.168.0.8 需要安装: Nginx Php Mysql Zabbix 安装步骤: 一 . Nginx1.6安装 安装nginx前要先安装pcre(支持正则表达式),最好也安装一下openssl(可以支持…

linux脚本ls输出到变量中,bash – 将命令输出的错误消息存储到shell变量中

只需将stdout(正常输出)重定向到/ dev / null并保留stderror:a$(cp log.txt 2>&1 >/dev/null)看一个例子:$a$(cp log.txt 2>&1 >/dev/null)$echo "$a"cp: missing destination file operand after ‘log.txt’Try cp --he…

IOS 修改UIAlertController的按钮标题的字体颜色,字号,内容

IOS 修改UIAlertController的按钮标题的字体颜色,字号,内容 UIAlertController *alertVC [UIAlertController alertControllerWithTitle:"提示" message:nil preferredStyle:UIAlertControllerStyleActionSheet];//修改标题的内容&#xff0c…