JavaScript 系列八：同步与异步

时间 2021-06-02

标签 javascript 前端 java 编程数组浏览器服务器微信网络多线程栏目 JavaScript 繁體版

原文原文链接

"Code tailor"，为前端开发者提供技术相关资讯以及系列基础文章，微信关注“小和山的菜鸟们”公众号，及时获取最新文章。

前言

在开始学习以前，咱们想要告诉您的是，本文章是对本文章是对JavaScript语言知识中异步操做部分的总结，若是您已掌握下面知识事项，则可跳过此环节直接进入题目练习javascript

单线程
同步概念
异步概念
异步操做的模式
异步操做的流程控制
定时器的建立和清除

若是您对某些部分有些遗忘，👇🏻 已经为您准备好了！前端

汇总总结

单线程

单线程指的是，JavaScript 只在一个线程上运行。也就是说，JavaScript 同时只能执行一个任务，其余任务都必须在后面排队等待。java

JavaScript 之因此采用单线程，而不是多线程，跟历史有关系。JavaScript 从诞生起就是单线程，缘由是不想让浏览器变得太复杂，由于多线程须要共享资源、且有可能修改彼此的运行结果，对于一种网页脚本语言来讲，这就太复杂了。编程

单线程的好处：数组

实现起来比较简单
执行环境相对单纯

单线程的坏处：浏览器

坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行

若是排队是由于计算量大，CPU 忙不过来，倒也算了，可是不少时候 CPU 是闲着的，由于 IO 操做（输入输出）很慢（好比 Ajax 操做从网络读取数据），不得不等着结果出来，再往下执行。JavaScript 语言的设计者意识到，这时 CPU 彻底能够无论 IO 操做，挂起处于等待中的任务，先运行排在后面的任务。等到 IO 操做返回告终果，再回过头，把挂起的任务继续执行下去。这种机制就是 JavaScript 内部采用的“事件循环”机制（Event Loop）。服务器

单线程虽然对 JavaScript 构成了很大的限制，但也所以使它具有了其余语言不具有的优点。若是用得好，JavaScript 程序是不会出现堵塞的，这就是为何 Node 能够用不多的资源，应付大流量访问的缘由。微信

为了利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，容许 JavaScript 脚本建立多个线程，可是子线程彻底受主线程控制，且不得操做 DOM。因此，这个新标准并无改变 JavaScript 单线程的本质。网络

同步

同步行为对应内存中顺序执行的处理器指令。每条指令都会严格按照它们出现的顺序来执行，而每条指令执行后也能当即得到存储在系统本地（如寄存器或系统内存）的信息。这样的执行流程容易分析程序在执行到代码任意位置时的状态（好比变量的值）。多线程

同步操做的例子能够是执行一次简单的数学计算：

let xhs = 3

xhs = xhs + 4

在程序执行的每一步，均可以推断出程序的状态。这是由于后面的指令老是在前面的指令完成后才会执行。等到最后一条指定执行完毕，存储在 xhs 的值就当即可使用。

首先，操做系统会在栈内存上分配一个存储浮点数值的空间，而后针对这个值作一次数学计算，再把计算结果写回以前分配的内存中。全部这些指令都是在单个线程中按顺序执行的。在低级指令的层面，有充足的工具能够肯定系统状态。

异步

异步行为相似于系统中断，即当前进程外部的实体能够触发代码执行。异步操做常常是必要的，由于强制进程等待一个长时间的操做一般是不可行的（同步操做则必需要等）。若是代码要访问一些高延迟的资源，好比向远程服务器发送请求并等待响应，那么就会出现长时间的等待。

异步操做的例子能够是在定时回调中执行一次简单的数学计算：

let xhs = 3

setTimeout(() => (xhs = xhs + 4), 1000)

这段程序最终与同步代码执行的任务同样，都是把两个数加在一块儿，但这一次执行线程不知道 xhs 值什么时候会改变，由于这取决于回调什么时候从消息队列出列并执行。

异步代码不容易推断。虽然这个例子对应的低级代码最终跟前面的例子没什么区别，但第二个指令块（加操做及赋值操做）是由系统计时器触发的，这会生成一个入队执行的中断。到底何时会触发这个中断，这对 JavaScript 运行时来讲是一个黑盒，所以实际上没法预知（尽管能够保证这发生在当前线程的同步代码执行以后，不然回调都没有机会出列被执行）。不管如何，在排定回调之后基本没办法知道系统状态什么时候变化。

为了让后续代码可以使用 xhs ，异步执行的函数须要在更新 xhs 的值之后通知其余代码。若是程序不须要这个值，那么就只管继续执行，没必要等待这个结果了。

任务队列和事件循环

JavaScript 运行时，除了一个正在运行的主线程，引擎还提供一个任务队列（task queue），里面是各类须要当前程序处理的异步任务。（实际上，根据异步任务的类型，存在多个任务队列。为了方便理解，这里假设只存在一个队列。）

首先，主线程会去执行全部的同步任务。等到同步任务所有执行完，就会去看任务队列里面的异步任务。若是知足条件，那么异步任务就从新进入主线程开始执行，这时它就变成同步任务了。等到执行完，下一个异步任务再进入主线程开始执行。一旦任务队列清空，程序就结束执行。

异步任务的写法一般是回调函数。一旦异步任务从新进入主线程，就会执行对应的回调函数。若是一个异步任务没有回调函数，就不会进入任务队列，也就是说，不会从新进入主线程，由于没有用回调函数指定下一步的操做。

JavaScript 引擎怎么知道异步任务有没有结果，能不能进入主线程呢？答案就是引擎在不停地检查，一遍又一遍，只要同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是否是能够进入主线程了。这种循环检查的机制，就叫作事件循环（Event Loop）。

维基百科的定义是：“事件循环是一个程序结构，用于等待和发送消息和事件（a programming construct that waits for and dispatches events or messages in a program）”。

异步操做的模式

回调函数

回调函数是异步操做最基本的方法。

下面是两个函数 f1 和 f2 ，编程的意图是 f2 必须等到 f1 执行完成，才能执行。

function f1() {
  // ...
}

function f2() {
  // ...
}

f1()
f2()

上面代码的问题在于，若是 f1 是异步操做，f2 会当即执行，不会等到 f1 结束再执行。

这时，能够考虑改写 f1 ，把 f2 写成 f1 的回调函数。

function f1(callback) {
  // ...
  callback()
}

function f2() {
  // ...
}

f1(f2)

回调函数的优势是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（coupling），使得程序结构混乱、流程难以追踪（尤为是多个回调函数嵌套的状况），并且每一个任务只能指定一个回调函数。

异步操做的流程控制

若是有多个异步操做，就存在一个流程控制的问题：如何肯定异步操做执行的顺序，以及如何保证遵照这种顺序。

function async(arg, callback) {
  console.log('参数为 ' + arg + ' , 1秒后返回结果')
  setTimeout(function () {
    callback(arg * 2)
  }, 1000)
}

上面代码的 async 函数是一个异步任务，很是耗时，每次执行须要 1 秒才能完成，而后再调用回调函数。

若是有六个这样的异步任务，须要所有完成后，才能执行最后的 final 函数。请问应该如何安排操做流程？

function final(value) {
  console.log('完成: ', value)
}

async(1, function (value) {
  async(2, function (value) {
    async(3, function (value) {
      async(4, function (value) {
        async(5, function (value) {
          async(6, final)
        })
      })
    })
  })
})
// 参数为 1 , 1秒后返回结果
// 参数为 2 , 1秒后返回结果
// 参数为 3 , 1秒后返回结果
// 参数为 4 , 1秒后返回结果
// 参数为 5 , 1秒后返回结果
// 参数为 6 , 1秒后返回结果
// 完成:  12

上面代码中，六个回调函数的嵌套，不只写起来麻烦，容易出错，并且难以维护。

串行执行

咱们能够编写一个流程控制函数，让它来控制异步任务，一个任务完成之后，再执行另外一个。这就叫串行执行。

var items = [1, 2, 3, 4, 5, 6]
var results = []

function async(arg, callback) {
  console.log('参数为 ' + arg + ' , 1秒后返回结果')
  setTimeout(function () {
    callback(arg * 2)
  }, 1000)
}

function final(value) {
  console.log('完成: ', value)
}

function series(item) {
  if (item) {
    async(item, function (result) {
      results.push(result)
      return series(items.shift())
    })
  } else {
    return final(results[results.length - 1])
  }
}

series(items.shift())

上面代码中，函数 series 就是串行函数，它会依次执行异步任务，全部任务都完成后，才会执行 final 函数。items 数组保存每个异步任务的参数，results 数组保存每个异步任务的运行结果。

注意，上面的写法须要六秒，才能完成整个脚本。

并行执行

流程控制函数也能够是并行执行，即全部异步任务同时执行，等到所有完成之后，才执行final函数。

var items = [1, 2, 3, 4, 5, 6]
var results = []

function async(arg, callback) {
  console.log('参数为 ' + arg + ' , 1秒后返回结果')
  setTimeout(function () {
    callback(arg * 2)
  }, 1000)
}

function final(value) {
  console.log('完成: ', value)
}

items.forEach(function (item) {
  async(item, function (result) {
    results.push(result)
    if (results.length === items.length) {
      final(results[results.length - 1])
    }
  })
})

上面代码中，forEach 方法会同时发起六个异步任务，等到它们所有完成之后，才会执行 final 函数。

相比而言，上面的写法只要一秒，就能完成整个脚本。这就是说，并行执行的效率较高，比起串行执行一次只能执行一个任务，较为节约时间。可是问题在于若是并行的任务较多，很容易耗尽系统资源，拖慢运行速度。所以有了第三种流程控制方式。

并行与串行的结合

所谓并行与串行的结合，就是设置一个门槛，每次最多只能并行执行 n 个异步任务，这样就避免了过度占用系统资源。

var items = [1, 2, 3, 4, 5, 6]
var results = []
var running = 0
var limit = 2

function async(arg, callback) {
  console.log('参数为 ' + arg + ' , 1秒后返回结果')
  setTimeout(function () {
    callback(arg * 2)
  }, 1000)
}

function final(value) {
  console.log('完成: ', value)
}

function launcher() {
  while (running < limit && items.length > 0) {
    var item = items.shift()
    async(item, function (result) {
      results.push(result)
      running--
      if (items.length > 0) {
        launcher()
      } else if (running == 0) {
        final(results)
      }
    })
    running++
  }
}

launcher()

上面代码中，最多只能同时运行两个异步任务。变量 running 记录当前正在运行的任务数，只要低于门槛值，就再启动一个新的任务，若是等于0，就表示全部任务都执行完了，这时就执行 final 函数。

这段代码须要三秒完成整个脚本，处在串行执行和并行执行之间。经过调节 limit 变量，达到效率和资源的最佳平衡。

定时器的建立和清除

JavaScript 在浏览器中是单线程执行的，但容许使用定时器指定在某个时间以后或每隔一段时间就执行相应的代码。setTimeout() 用于指定在必定时间后执行某些代码，而 setInterval() 用于指定每隔一段时间执行某些代码。

setTimeout() 方法一般接收两个参数：要执行的代码和在执行回调函数前等待的时间（毫秒）。第一个参数能够是包含 JavaScript 代码的字符串（相似于传给 eval() 的字符串）或者一个函数。

// 在 1 秒后显示警告框
setTimeout(() => alert('Hello XHS-Rookies!'), 1000)

第二个参数是要等待的毫秒数，而不是要执行代码的确切时间。 JavaScript 是单线程的，因此每次只能执行一段代码。为了调度不一样代码的执行， JavaScript 维护了一个任务队列。其中的任务会按照添加到队列的前后顺序执行。 setTimeout() 的第二个参数只是告诉 JavaScript 引擎在指定的毫秒数事后把任务添加到这个队列。若是队列是空的，则会当即执行该代码。若是队列不是空的，则代码必须等待前面的任务执行完才能执行。

调用 setTimeout() 时，会返回一个表示该超时排期的数值 ID。这个超时 ID 是被排期执行代码的惟一标识符，可用于取消该任务。要取消等待中的排期任务，能够调用 clearTimeout() 方法并传入超时 ID，以下面的例子所示：

// 设置超时任务
let timeoutId = setTimeout(() => alert('Hello XHS-Rookies!'), 1000)// 取消超时任务clearTimeout(timeoutId)

只要是在指定时间到达以前调用 clearTimeout() ，就能够取消超时任务。在任务执行后再调用 clearTimeout() 没有效果。

注意全部超时执行的代码（函数）都会在全局做用域中的一个匿名函数中运行，所以函数中的 this 值在非严格模式下始终指向 window，而在严格模式下是 undefined。若是给 setTimeout() 提供了一个箭头函数，那么 this 会保留为定义它时所在的词汇做用域。

setInterval() 与 setTimeout() 的使用方法相似，只不过指定的任务会每隔指定时间就执行一次，直到取消循环定时或者页面卸载。setInterval() 一样能够接收两个参数：要执行的代码（字符串或函数），以及把下一次执行定时代码的任务添加到队列要等待的时间（毫秒）。下面是一个例子：

setInterval(() => alert('Hello XHS-Rookies!'), 10000)

注意这里的关键点是，第二个参数，也就是间隔时间，指的是向队列添加新任务以前等待的时间。好比，调用 setInterval() 的时间为 01:00:00，间隔时间为 3000 毫秒。这意味着 01:00:03 时，浏览器会把任务添加到执行队列。浏览器不关心这个任务何时执行或者执行要花多长时间。所以，到了 01:00:06，它会再向队列中添加一个任务。由此可看出，执行时间短、非阻塞的回调函数比较适合 setInterval() 。

setInterval() 方法也会返回一个循环定时 ID，能够用于在将来某个时间点上取消循环定时。要取消循环定时，能够调用 clearInterval() 并传入定时 ID。相对于 setTimeout() 而言，取消定时的能力对 setInterval() 更加剧要。毕竟，若是一直无论它，那么定时任务会一直执行到页面卸载。下面是一个常见的例子：

let xhsNum = 0,
  intervalId = null
let xhsMax = 10

let xhsIncrementNumber = function () {
  xhsNum++
  // 若是达到最大值，则取消全部未执行的任务
  if (xhsNum == xhsMax) {
    clearInterval(xhsIntervalId) // 清除定时器
    alert('Done')
  }
}
xhsIntervalId = setInterval(xhsIncrementNumber, 500)

在这个例子中，变量 num 会每半秒递增一次，直至达到最大限制值。此时循环定时会被取消。这个模式也可使用 setTimeout() 来实现，好比：

let xhsNum = 0
let xhsMax = 10

let xhsIncrementNumber = function () {
  xhsNum++
  // 若是尚未达到最大值，再设置一个超时任务
  if (xhsNum < xhsMax) {
    setTimeout(xhsIncrementNumber, 500)
  } else {
    alert('Done')
  }
}
setTimeout(xhsIncrementNumber, 500)

注意在使用 setTimeout() 时，不必定要记录超时 ID，由于它会在条件知足时自动中止，不然会自动设置另外一个超时任务。这个模式是设置循环任务的推荐作法。 setIntervale() 在实践中不多会在生产环境下使用，由于一个任务结束和下一个任务开始之间的时间间隔是没法保证的，有些循环定时任务可能会所以而被跳过。而像前面这个例子中同样使用 setTimeout() 则能确保不会出现这种状况。通常来讲，最好不要使用 setInterval()。

题目自测

1、如下代码输出是什么？

console.log('first')
setTimeOut(() => {
  console.log('second')
}, 1000)
console.log('third')

2、制做一个 60s 计时器。

题目解析

1、

// first
// third
// second

setTimeOut 执行时使里面的内容进入异步队列。因此会先执行下面的 third 输出以后，才输出 setTimeOut 中的内容。

2、

function XhsTimer() {
  var xhsTime = 60 // 设置倒计时时间 60s
  const xhsTimer = setInterval(() => {
    // 建立定时器
    if (xhsTime > 0) {
      // 大于 0 时，一次次减
      xhsTime--
      console.log(xhsTime) // 输出每一秒
    } else {
      clearInterval(xhsTimer) // 清除定时器
      xhsTime = 60 // 从新设置倒计时时间 60s
    }
  }, 1000) // 1000 为设置的时间，1000毫秒 也就是一秒
}
XhsTimer()