JavaScript（三）：理解异步

1、概述

大家好，我是欧阳方超。
已经介绍完回调函数了，现实中，我们经常在异步函数中使用回调函数。setTimeout()就是一个典型的异步函数。那就先学着使用一下setTimeout()函数，再来理解异步的概念吧。

2、异步

2.1、setTimeout()函数小试

下面的代码中，ringTheBell()函数作为回调函数传给setTimeout()函数，5秒后ringTheBell()被调用。

setTimeout(ringTheBell, 5000)
  
      function ringTheBell() {
          console.log("时间到");
      }

上面代码还有两种写法，就是把ringTheBell()函数直接以匿名函数或箭头函数的形式写在setTimeout()的参数处，如下：

//匿名函数
setTimeout(function() {
          console.log("时间到");
      }, 5000)

//箭头函数
setTimeout(()=>{
          console.log("时间到");
      }, 5000)

需要说明的是，如果setTimeout()后面还有任务要执行的话，这里的任务是不会等待5秒再执行的，而是调用完setTimeout()后立即执行，从这也可以初步体会到异步的含义。

2.2、异步函数存在的合理性与必然性

我们先看一个稍微规范点的对异步编程的定义：异步编程允许程序在执行一个耗时较长的任务时，继续对其他事件做出反应而不用等待该耗时任务完成，一旦耗时的任务运行完成，程序可以得到它的结果。

处理耗时常的任务时对其他事件依然有做出反应的能力，这道出了异步函数存在的必然性，因为JavaScript中有很多函数都比较耗时，比如浏览器提供的fetch()、getUserMedia()、showOpenFilePicker()等，如果不设计成异步的，当遇到某个任务非常耗时时，浏览器将不会响应用户的操作，势必带来较差的体验。所以，可以这么简单地理解——异步函数就是解决耗时的同步函数而产生的。

概括地讲，异步函数可以为我们提供如下能力：
调用一个函数来执行耗时较长的操作；
函数可以立即返回，使得程序可以继续响应其他事件；
当耗时较长的操作执行完毕时，可以通知程序执行的结果；

2.3、能自己设计异步函数吗

能自己设计异步函数吗？这个理论上是可以的！但是会涉及到浏览器引擎一类的技术，所以“普通用户”还是使用已经封装好的异步函数即可，如setTimeout()、XMLHttpRequest相关函数，可以通过调用这些函数间接实现想要的异步效果。当然后来又引入了async关键字来声明一个异步函数。

2.4、回调与异步的关系

回调并不一定就是异步，他们之间并没有直接的关系，只不过回调函数可以用来处理异步函数的执行结果，使用回到函数的地方，程序执行流程可以是同步的也可以是异步的。

3、总结

诸如网络请求之类的操作耗时较长，通常以异步函数的形式来执行这类操作，当耗时长的操作完成以后又需要使用回调函数对结果进行处理，所以会经常在异步函数中使用回调函数，异步函数与回调函数此时珠联璧合。
我是欧阳方超，把事情做好了自然就有兴趣了，如果你喜欢我的文章，欢迎点赞、转发、评论加关注。