关于javascript:js异步编程面试题你能答上来几道

4次阅读

共计 5160 个字符，预计需要花费 13 分钟才能阅读完成。

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

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

异步和这一大节的知识点其实并不是一个概念，然而这个两个名词的确是很多人混同的知识点，其实混同的起因可能只是两个名词在中文的类似，在英文上来说齐全是不同的单词。

并发是宏观概念，我别离有工作 A 和工作 B，在一段时间内通过工作间的切换实现了这两个工作，这种状况就能够成为并发。

并行是宏观概念，假如 cpu 中存在两个外围，那么我就能够同时实现工作 A，B。同时实现多个工作的状况就能够称之为并行。

面试题：什么是回调函数？回调函数有什么毛病？如何解决回调天堂问题？

回调函数应该是大家常常应用到的，以下代码是回调函数的例子：

ajax(url,()=>{// 解决逻辑})

然而回调函数有个致命的弱点，就是容易写出回调天堂，假如多个申请存在依赖性，你可能就会写出如下代码：

ajax(url,()=>{ajax(url,()=>{})
})

以上代码看起来不利于浏览和保护，当然你可能会说解决这个问题还不简略，把函数离开来写不就得了

function firstAjax(){ajax(url1,()=>{secondAjax()
    })

}
function second(){ajax(url2,()=>{})
}
ajax(url,()=>{firstAjax()
})

以上代码看上去有利于浏览了，然而还是没有解决基本问题

回调天堂得基本问题是：

嵌套函数存在耦合性，一旦有改变，就会牵一发而动全身
嵌套函数一多就很难处理错误

当然，回调函数还存在着别的毛病，比方不能应用 try catch 捕捉谬误，不能间接 return。

面试题：你了解的 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()

翻译过去就是承诺的意思，这个承诺会在将来有一个确切的回答，并且该承诺有三种状态，别离是：

期待中（pending）
实现了（resolved）
回绝了（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 的特点，它们的长处和毛病别离是什么？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 = 0
let 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 * 2
let startTime = new Date().getTime()
let count = 0
let end = new Date().getTime() + period
let interval = 1000
let 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 = 0
setInterval(timer => {console.log(1)
  a++
  if (a === 3) cancelAnimationFrame(timer)
}, 1000)

首先 requestAnimationFrame 自带函数节流性能，根本能够保障在 16.6 毫秒内只执行一次（不掉帧的状况下），并且该函数的延时成果是准确的，没有其余定时器工夫不准的问题，当然你也能够通过该函数来实现 setTimeout。

正文完