前端经典面试题: JS的同步与异步

408 阅读3分钟

前言:先来看看一道面试题,不知道大家面试的时候碰到过没有。相信看到最后应该就能得到答案了。

console.log(111)
setTimeout(function () {
console.log(222)
}, 1000)
console.log(333)
//问, 输出的结果是什么?

console.log(111)
setTimeout(function () {
console.log(222)
}, 0)
console.log(333)
//问, 输出的结果是什么?

JS的语言特点

  • JavaScript语言的一大特点就是单线程,也就是说同一时间只能做一件事情,比如我追女孩子,我今年只追一个女孩子,我不能同时去追多个女孩子。

为什么JavaScript是单线程,不能是多线程呢?当海王不快乐吗?这是因为JavaScript这门脚本语言诞生的使命所导致的-JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行,应该先添加,之后再删除,如果是多线程,那么同时增加和删除,那应该先执行谁?

单线程就意味着,所有的任务都需要排队才能进行,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行时间过长,这样就会导致页面渲染阻塞,不连贯。比如,排队做核酸,前面的人一直磨磨唧唧的,就会导致排队做核酸的时间变长。

同步与异步

  • 为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker 标准,允许JavaScript脚本创建多个线程。于是js中出现了同步和异步。
  1. 同步 前一个任务结束后再执行后一个任务,程序执行顺序与任务的排列顺序是一致的。比如做饭的同步做法:我们要烧水煮饭,等水开了,再去切菜,炒菜。

  2. 异步 我们在烧水的同时,利用这10分钟去切菜,炒菜。

  3. 同步任务 同步任务都在主线程上执行,形成一个执行栈

image.png

  1. 异步任务 JS的异步是通过回调函数实现的。 一般而言,异步任务有三种类型:
  2. 普通事件,比如,点击等等
  3. 资源加载, 如load等
  4. 定时器,包括setIterval、setTimeout等 异步任务相关添加到任务队列中。

image.png

事件循环

  1. 先执行执行栈中的同步任务
  2. 异步任务放入任务队列中
  3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是读取的异步任务结束等待状态,进入执行栈开始执行。

image.png

由于主线程不断的重复获得任务,执行任务,再获得任务再执行,所以被称为事件循环(event loop)

结束: 所以现在面试题的答案应该有结果了。