JS中的同步和异步

时间 2019-11-11

原文原文链接

javascript语言是一门“单线程”的语言，不像java语言，类继承Thread再来个thread.start就能够开辟一个线程，因此，javascript就像一条流水线，仅仅是一条流水线而已，要么加工，要么包装，不能同时进行多个任务和流程。javascript

因此同步和异步，不管如何，作事情的时候都是只有一条流水线（单线程），同步和异步的差异就在于这条流水线上各个流程的执行顺序不一样。java

　　一、最基础的异步是setTimeout和setInterval函数，很常见，可是不多人有人知道其实这就是异步，由于它们能够控制js的执行顺序。咱们也能够简单地理解为：能够改变程序正ajax

　　　常执行顺序的操做就能够当作是异步操做promise

 1 <script type="text/javascript">
 2         console.log( "1" );
 3         setTimeout(function() {
 4             console.log( "2" )
 5         }, 0 );
 6         setTimeout(function() {
 7             console.log( "3" )
 8         }, 0 );
 9         setTimeout(function() {
10             console.log( "4" )
11         }, 0 );
12         console.log( "5" );
13 </script>

输出顺序：浏览器

　　　　在执行程序的时候，浏览器会默认setTimeout以及ajax请求这一类的方法都是耗时程序（尽管可能不耗时），将其加入一个队列中，该队列是一个存储耗时程序的队列，网络

　　　　在全部不耗时程序执行事后，再来依次执行该队列中的程序。异步

　　二、又回到了最初的起点——javascript是单线程。单线程就意味着，全部任务须要排队，前一个任务结束，才会执行后一个任务。若是前一个任务耗时很长，后一个任务就不async

　　　得不一直等着。因而就有一个概念——任务队列。若是排队是由于计算量大，CPU忙不过来，倒也算了，可是不少时候CPU是闲着的，由于IO设备（输入输出设备）很函数

　　　慢（好比Ajax操做从网络读取数据），不得不等着结果出来，再往下执行。因而JavaScript语言的设计者意识到，这时主线程彻底能够无论IO设备，挂起处于等待中的任spa

　　　务，先运行排在后面的任务。等到IO设备返回告终果，再回过头，把挂起的任务继续执行下去。

　　　因而，全部任务能够分红两种，一种是同步任务（synchronous），另外一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务

　　　执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，

　　　请求执行任务，该任务才会进入主线程执行。

　　　具体来讲，异步运行机制以下：

　　　　（1）全部同步任务都在主线程上执行，造成一个执行栈（execution context stack）。
　　　　（2）主线程以外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果， 就在"任务队列"之中放置一个事件。
　　　　（3）一旦"执行栈"中的全部同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，因而结束等待状态，进入执行栈，开始执行。
　　　　（4）主线程不断重复上面的第三步。

　　　只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。

　　　 "任务队列"是一个事件的队列（也能够理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务能够进入"执行栈"了。主线程

　　　读取"任务队列"，就是读取里面有哪些事件。
　　　 "任务队列"中的事件，除了IO设备的事件之外，还包括一些用户产生的事件（好比鼠标点击、页面滚动等等），好比$(selectot).click(function)，这些都是相对耗时的操做。

　　　只要指定过这些事件的回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。
　　　所谓"回调函数"（callback），就是那些会被主线程挂起来的代码，前面说的点击事件$(selectot).click(function)中的function就是一个回调函数。异步任务必须指定回调函

　　　数，当主线程开始执行异步任务，就是执行对应的回调函数。例如ajax的success，complete，error也都指定了各自的回调函数，这些函数就会加入“任务队列”中，等待

　　　执行。

　　　三、Promise对象用于异步操做，它表示一个还没有完成且预计在将来完成的异步操做。

　　　　　　 Promise的真正强大之处在于它的多重链式调用，能够避免层层嵌套回调

　　　　　　Promise对象表明一个未完成、但预计未来会完成的操做。
　　　　　　它有如下三种状态：

- pending：初始值，不是fulfilled，也不是rejected
- fulfilled：表明操做成功
- rejected：表明操做失败

/* 例3.1 */
//构建Promise
var promise = new Promise(function (resolve, reject) {
    if (/* 异步操做成功 */) {
        resolve(data);
    } else {
        /* 异步操做失败 */
        reject(error);
    }
});

相似构建对象，咱们使用new来构建一个Promise。Promise接受一个「函数」做为参数，该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」，由JavaScript引擎提供。

resolve函数的做用：在异步操做成功时调用，并将异步操做的结果，做为参数传递出去；
reject函数的做用：在异步操做失败时调用，并将异步操做报出的错误，做为参数传递出去。

Promise实例生成之后，能够用then方法指定resolved状态和reject状态的回调函数。

/* 接例3.1 */
promise.then(onFulfilled, onRejected);

promise.then(function(data) {
  // do something when success
}, function(error) {
  // do something when failure
});

then方法会返回一个Promise。它有两个参数，分别为Promise从pending变为fulfilled和rejected时的回调函数（第二个参数非必选）。这两个函数都接受Promise对象传出的值做为参数。
简单来讲，then就是定义resolve和reject函数的，其resolve参数至关于：

function resolveFun(data) {
    //data为promise传出的值
}

而新建Promise中的'resolve(data)'，则至关于执行resolveFun函数。
Promise新建后就会当即执行。而then方法中指定的回调函数，将在当前脚本全部同步任务执行完才会执行。