写点什么

js 异步编程面试题你能答上来几道

作者:loveX001
  • 2022 年 10 月 10 日
    浙江
  • 本文字数:4034 字

    阅读完需:约 13 分钟

在上一节中我们了解了常见的 es6 语法的一些知识点。这一章节我们将会学习异步编程这一块内容,鉴于异步编程是 js 中至关重要的内容,所以我们将会用三个章节来学习异步编程涉及到的重点和难点,同时这一块内容也是面试常考范围。

并发(concurrency)和并行(parallelism)的区别

面试题 并发和并行的区别?


异步和这一小节的知识点其实并不是一个概念,但是这个两个名词确实是很多人混淆的知识点,其实混淆的原因可能只是两个名词在中文的相似,在英文上来说完全是不同的单词。


并发是宏观概念,我分别有任务 A 和任务 B,在一段时间内通过任务间的切换完成了这两个任务,这种情况就可以成为并发。


并行是微观概念,假设 cpu 中存在两个核心,那么我就可以同时完成任务 A,B。同时完成多个任务的情况就可以称之为并行。

回调函数(callback)

面试题: 什么是回调函数?回调函数有什么缺点?如何解决回调地狱问题?


回调函数应该是大家经常使用到的,以下代码是回调函数的例子:


ajax(url,()=>{    //处理逻辑})
复制代码


但是回调函数有个致命的弱点,就是容易写出回调地狱,假设多个请求存在依赖性,你可能就会写出如下代码:


ajax(url,()=>{    ajax(url,()=>{})})
复制代码


以上代码看起来不利于阅读和维护,当然你可能会说解决这个问题还不简单,把函数分开来写不就得了


function firstAjax(){    ajax(url1,()=>{        secondAjax()    })
}function second(){ ajax(url2,()=>{
})}ajax(url,()=>{ firstAjax()})
复制代码


以上代码看上去有利于阅读了,但是还是没有解决根本问题


回调地狱得根本问题是:


  1. 嵌套函数存在耦合性,一旦有改动,就会牵一发而动全身

  2. 嵌套函数一多就很难处理错误


当然,回调函数还存在着别的缺点,比如不能使用 try catch 捕获错误,不能直接 return。

Generator

面试题:你理解的 generator 是什么?


Generator 算是 es6 中难理解的概念之一了,Generator 最大的特点就是可以控制函数的执行。在这一小节中我们不会讲什么是 Generator,而把重点放在 Generator 的一些容易困惑的地方。


function  *foo(){    let y = 2*(yield(x+1))    let z = yield(y/3)    return (x+y+z)}let it = foo(5)console.log(it.next())console.log(it.next(12))console.log(it.next(13))
复制代码


你也许会疑惑为什么会产生与你预想不同的值,接下来就让我为你逐行代码分析原因


  • 首先 Generator 函数调用和普通函数不同,它会返回一个迭代器

  • 当执行第一次 next 时,传参会被忽略,并且函数暂停在 yield (x + 1) 处,所以返回 5 + 1 = 6

  • 当执行第二次 next 时,传入的参数等于上一个 yield 的返回值,如果你不传参,yield 永远返回 undefined。此时 let y = 2 * 12,所以第二个 yield 等于 2 * 12 / 3 = 8

  • 当执行第三次 next 时,传入的参数会传递给 z,所以 z = 13, x = 5, y = 24,相加等于 42


Generator 函数一般见到的不多,其实也于他有点绕有关系,并且一般会配合 co 库去使用。当然,我们可以通过 Generator 函数解决回调地狱的问题,可以把之前的回调地狱例子改写为如下代码:


function *fetch() {    yield ajax(url, () => {})    yield ajax(url1, () => {})    yield ajax(url2, () => {})}let it = fetch()let result1 = it.next()let result2 = it.next()let result3 = it.next()
复制代码

Promise

翻译过来就是承诺的意思,这个承诺会在未来有一个确切的答复,并且该承诺有三种状态,分别是:


  1. 等待中(pending)

  2. 完成了 (resolved)

  3. 拒绝了(rejected)


这个承诺一旦从等待状态变成其他状态就永远不能更改状态了,也就是说一旦状态编为 resolved 后就不能再次改变


new Promise((resolve, reject) => {  resolve('success')  // 无效  reject('reject')})
复制代码


当我们在构造 Promise 的时候,构造函数内部的代码是立即执行的


new Promise((resolve, reject) => {  console.log('new Promise')  resolve('success')})console.log('finifsh')// new Promise -> finifsh
复制代码


Promise 实现了链式调用,也就是说每次调用 then 之后返回的都是一个 Promise,并且是一个全新的 Promise,原因也是因为状态不可变。如果你在 then 中 使用了 return,那么 return 的值会被 Promise.resolve() 包装


Promise.resolve(1)  .then(res => {    console.log(res) // => 1    return 2 // 包装成 Promise.resolve(2)  })  .then(res => {    console.log(res) // => 2  })
复制代码


当然了,Promise 也很好地解决了回调地狱的问题,可以把之前的回调地狱例子改写为如下代码:


ajax(url)  .then(res => {      console.log(res)      return ajax(url1)  }).then(res => {      console.log(res)      return ajax(url2)  }).then(res => console.log(res))
复制代码


前面都是在讲述 Promise 的一些优点和特点,其实它也是存在一些缺点的,比如无法取消 Promise,错误需要通过回调函数捕获。参考 前端进阶面试题详细解答

async 及 await

面试题:async 及 await 的特点,它们的优点和缺点分别是什么?await 原理是什么?


一个函数如果加上 async ,那么该函数就会返回一个 Promise


async function test() {  return "1"}console.log(test()) // -> Promise {<resolved>: "1"}
复制代码


async 就是将函数返回值使用 Promise.resolve() 包裹了下,和 then 中处理返回值一样,并且 await 只能配套 async 使用


async function test() {  let value = await sleep()}
复制代码


async 和 await 可以说是异步终极解决方案了,相比直接使用 Promise 来说,优势在于处理 then 的调用链,能够更清晰准确的写出代码,毕竟写一大堆 then 也很恶心,并且也能优雅地解决回调地狱问题。当然也存在一些缺点,因为 await 将异步代码改造成了同步代码,如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。


async function test() {  // 以下代码没有依赖性的话,完全可以使用 Promise.all 的方式  // 如果有依赖性的话,其实就是解决回调地狱的例子了  await fetch(url)  await fetch(url1)  await fetch(url2)}
复制代码


下面来看一个使用 await 的例子:


let a = 0let b = async () => {  a = a + await 10  console.log('2', a) // -> '2' 10}b()a++console.log('1', a) // -> '1' 1
复制代码


对于以上代码你可能会有疑惑,让我来解释下原因


  • 首先 b 先执行,在执行 await 10 之前变量 a 还是 0,因为 await 内部实现了 generator,generator 会保留堆栈中东西,所以这个时候 a = 0 被保存下来

  • 因为 await 是异步操作,后来的表达式不返回 promise 的话,就会包装成 Promise.resolve(返回值),然后去执行函数外的同步代码

  • 同步代码执行完毕后开始执行异步代码,将保存下来的值拿出来使用,这时候 a = 0 + 10


上述解释中提到了 await 内部实现了 generator,其实 await 就是 generator 加上 Promise 的语法糖,且内部实现了自动执行 generator。如果你熟悉 co 的话,其实自己就可以实现这样的语法糖。

常用定时器

面试题: setTimeout,setInterval,requestAnimationFrame 各有什么特点?


异步编程当然少不了定时器,常见的定时器函数有 setTimeout,setInterval,requestAnimationFrame。我们先来讲讲最常用的 setTimeout,很多人认为 setTimeout 是延迟多久,那就应该是多久后执行。其实这个观点是错误的,因为 js 是单线程执行的,如果前面的代码影响了性能,就会导致 setTimeout 不会按期执行。当然了,我们可以通过代码修正 setTimeout,从而使定时器相对准确


let period = 60 * 1000 * 60 * 2let startTime = new Date().getTime()let count = 0let end = new Date().getTime() + periodlet interval = 1000let currentInterval = interval
function loop() { count++ // 代码执行所消耗的时间 let offset = new Date().getTime() - (startTime + count * interval); let diff = end - new Date().getTime() let h = Math.floor(diff / (60 * 1000 * 60)) let hdiff = diff % (60 * 1000 * 60) let m = Math.floor(hdiff / (60 * 1000)) let mdiff = hdiff % (60 * 1000) let s = mdiff / (1000) let sCeil = Math.ceil(s) let sFloor = Math.floor(s) // 得到下一次循环所消耗的时间 currentInterval = interval - offset console.log('时:'+h, '分:'+m, '毫秒:'+s, '秒向上取整:'+sCeil, '代码执行时间:'+offset, '下次循环间隔'+currentInterval)
setTimeout(loop, currentInterval)}
setTimeout(loop, currentInterval)
复制代码


接下来我们来看 setInterval,其实这个函数作用和 setTimeout 基本一致,只是该函数是每隔一段时间执行一次回调函数。


通常来说不建议使用 setInterval。第一,它和 setTimeout 一样,不能保证在预期的时间执行任务。第二,它存在执行累积的问题,请看以下伪代码


function demo() {  setInterval(function(){    console.log(2)  },1000)  sleep(2000)}demo()
复制代码


以上代码在浏览器环境中,如果定时器执行过程中出现了耗时操作,多个回调函数会在耗时操作结束以后同时执行,这样可能就会带来性能上的问题。


如果你有循环定时器的需求,其实完全可以通过 requestAnimationFrame 来实现


function setInterval(callback, interval) {  let timer  const now = Date.now  let startTime = now()  let endTime = startTime  const loop = () => {    timer = window.requestAnimationFrame(loop)    endTime = now()    if (endTime - startTime >= interval) {      startTime = endTime = now()      callback(timer)    }  }  timer = window.requestAnimationFrame(loop)  return timer}
let a = 0setInterval(timer => { console.log(1) a++ if (a === 3) cancelAnimationFrame(timer)}, 1000)
复制代码


首先 requestAnimationFrame 自带函数节流功能,基本可以保证在 16.6 毫秒内只执行一次(不掉帧的情况下),并且该函数的延时效果是精确的,没有其他定时器时间不准的问题,当然你也可以通过该函数来实现 setTimeout。

用户头像

loveX001

关注

还未添加个人签名 2022.09.01 加入

还未添加个人简介

评论

发布
暂无评论
js异步编程面试题你能答上来几道_JavaScript_loveX001_InfoQ写作社区