异步函数(1)

97 阅读2分钟

首先需要知道的是

  • 什么是异步函数
  • 异步函数怎么实现的(实现的方式有哪些)
  1. 什么是异步函数
  • 因为JS是一种单线程编程,
  • 是一种编程技术,用于处理需要等待的操作而不阻塞程序的执行。它允许程序在等待某些操作(如I/O操作、网络请求等)完成的同时继续执行其他任务,从而提高程序的效率和响应速度。
  1. 实现异步操作的三种方法
  1. 使用回调函数执行异步操作
  2. 由于单纯的使用回调函数,容易制造回调地狱,在对代码进行修改以及逻辑处理过程中会相当复杂,所以提出了promise来进行异步操作
  3. 使用async,await与promise相比更加简洁,结构上更像同步函数,在对逻辑处理上更加简明。
  1. 异步实现
  • 同步函数按照代码的流程进行处理过程中可能会碰到需要耗时较长的函数处理,此时如果按照同步操作,及必须等待这个函数处理结束之后才能进行后续处理,将会十分影响程序的性能,因此提出了异步操作。
  • 异步函数为,你提供的函数将在事件发生时被调用,而不是立即进行调用
  • 异步通常会涉及事件循环,回调函数。
  1. 异步函数原理

在程序执行期间,js是解释型编程语言,如果碰到需要进行处理的异步函数,会先将异步函数存放到队列中,跳过异步函数执行之后的操作,当所有同步操作执行完毕之后,再回过头来执行异步操作。

常见的根据settimeout来实现的异步函数,将进行异步操作的函数存入到webapi中根据时间结束的长短,再依次存放到队列中,再次放入到栈中依次进行编译解释。如果函数中再次碰到异步函数,重复之前的操作。

关于使用settimeout进行异步的操作

例: 设置两个异步函数fn1和fn2,在程序进行解释编译过程中的步骤

1). 逐条语句进行解释编译,读取到异步函数时,将程序进行暂存。

2). 程序执行完毕,开始执行暂存的函数,根据时间长短进行排序。

3). 首先执行一秒后执行的fn2函数,此时读取到fn3函数继续进行暂存。

4). 由于fn1剩余时间小于fn3所以之后执行fn1

5). 最后执行fn3,程序执行结束。

image-20240801165506286.png image-20240801165547243.png image-20240801165640722.png

上面是三个图分别验证了不同时间情况下settimeout的执行结果