JavaScript的三座大山之单线程和异步

JavaScript的三座大山之单线程和异步

在前端领域中，JavaScript的三座大山分别是：单线程和异步、闭包和作用域、this指向。本次我们来详细讲解其中的单线程和异步部分。

单线程指什么？

“单线程”并不是意味着JavaScript只能执行一行代码，而是指JavaScript引擎只有一个执行栈，也就意味着一次只能执行一条指令，即同一时间只能做一件事情。这也就是为什么在JS中在执行比较耗时的代码时会出现页面卡顿现象。

异步执行

为了避免在执行比较耗时的代码时出现页面卡顿现象，JavaScript采用了异步执行的方式。异步执行在JS中的体现主要是通过回调函数和事件绑定来实现的。

JavaScript中有两种异步执行的方式：
1. 回调函数
2. Promise对象

异步执行中使用了一个任务队列（task queue）来实现任务的异步执行，任务分为同步任务和异步任务。同步任务会在执行栈中排队等待执行，异步任务会在异步任务的任务队列中排队等待执行。当执行栈中的所有同步任务都执行完成之后，JavaScript会去异步任务队列中查看是否有可执行的任务。

示例1：回调函数的使用

下面是一个回调函数的使用，我们可以看到，请求的返回时间不确定，因此需要将请求完成之后需要执行的函数（比如渲染页面等）作为回调函数传入，确保请求执行完成之后才会继续执行回调函数。

function fetchData(callback) {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log('数据请求成功')
      callback(data) // 将请求完成之后需要执行的函数作为回调函数传入
    })
}

function renderPage(data) {
  // 渲染页面的代码
}

fetchData(renderPage);

示例2：Promise的使用

下面是一个使用Promise的例子，可以看到，Promise中的then函数会在异步请求完成之后执行，then函数中可以传入需要执行的回调函数。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('数据请求成功')
    // 渲染页面的代码
  })
  .catch(error => console.error(error))

希望本文对你有所帮助！