前端JS面试题-基础-异步和单线程

写在前面：本文内容主要根据慕课网双越老师的付费课程“一天时间迅速准备前端面试 快速构建初级前端知识体系 ”进行编写，主要是为了自己在面试前总结学习，欢迎留言指教。

本系列包括如下内容：

• JS基础-变量类型和计算
• JS基础-原型和原型链
• JS基础-作用域和闭包
• JS基础-异步和单线程

每一部分包括题目和知识点两部分。

异步和单线程

题目

1. 同步和异步的区别是什么
2. 手写用promise加载一张图片
3. 前端使用异步的场景有哪些 2 等待的场景
4. 场景题，1 2 3 4 5 打印次序 1 3 5 4 2

1. 同步和异步的区别是什么

• 基于JS是单线程语言
• 异步不会阻塞代码执行
• 同步会阻塞代码执行

2. 手写用promise加载一张图片

function loadImg(src) {
  return new Promise((resolve, reject) => {
      const img = document.createElement('img')
      img.onload = () => {
        resolve(img)
      }
      img.onerror = () => {
        const err = new Error(`图片加载失败 ${src}`)
        reject(err)
      }
      img.src = src
    }
  )
}

3. 前端使用异步的场景有哪些

主要有两种应用场景，分别为：

• 网络请求，如ajax 图片加载
• 定时任务，如setTimeout

4. 场景题

打印次序： 1 3 5 4 2
先处理同步函数，再处理异步函数

知识点

1. 单线程和异步

• JS是单线程语言，只能同时做一件事，这是JS的局限；
• 浏览器和nodejs已支持JS启动进程，如 Web Worker；
• JS和DOM渲染共用同一个线程，因为JS可修改DOM；
• 但我们希望遇到等待（网络请求，定时任务）不能卡住，因此我们需要异步；
• 异步都是回调callback函数形式。

2.异步和同步的区别

• 基于JS是单线程语言
• 异步不会阻塞代码执行
• 同步会阻塞代码执行

// 异步 callback 回调函数
console.log(100)
setTimeout(() => {
  console.log(200)
}, 1000)
console.log(300)  // 100 300 200

// 同步
console.log(100)
alert(200)
console.log(300) // 100 200 300 同时alert会阻塞300的输出

3. 前端异步的应用场景

主要有两种应用场景，分别为：

• 网络请求，如ajax 图片加载
• 定时任务，如setTimeout

// ajax
$.get('data.json', function(data){
console.log(data)
})

// 图片加载
let img = document.createElement('img)
img.onload = function () {
	console.log('loaded')
}
img.src = 'xxx.png'

// setTimeout
console.log(100)
setTimeout(function () {
	console.log(200)
})
console.log(300)

// setInterval
console.log(100)
setInterval(function () {
	console.log(200)
})
console.log(300)

4. callback hell和promise

如果我们想要根据获取的data1，来获取data2，再根据获取的data2来获取data3，那么就会形成callback hell：

这时，我们就需要promise来解决callback hell。
所以，我们对上面的代码进行如下改写：

function getData(url){
	return new Promise((resolve, reject)=>{
		$.ajax({
			url,
			success(data){
				resolve(data)
			},
			error(err){
				reject(err)
			}
		})
	})
}

const url1 = 'data1.json'
const url2 = 'data2.json'
const url3 = 'data3.json'
getData(url1).then(data1=>{
	console.log(data1)
	return getData(url2)
}).then(data2=>{
	console.log(data2)
	return getData(url3)
}).then(data3=>{
	console.log(data3)
}).catch(err => console.error(err))

这样呢，callback hell的嵌套形式就变成了管道形式。