JS基础知识：异步和单线程

知识点

• 单线程和异步,异步和同步的区别
• 前端异步的应用场景：网络请求 & 定时任务
• Promise 解决 callback hell （嵌套问题）

单线程和异步

• JS是单线程语言，只能同时做一件事儿
• 浏览器和nodejs已支持JS启动进程，如 Web Worker
• JS 和 DOM 渲染共用同一个进程，因为JS可修改DOM结构

因为单线程，遇到等待（网络请求，定时任务）时会卡住。因此需要异步（异步是基于回调callback函数形式调用的）

// 异步 （callback 回调函数） 异步不会阻塞代码执行
console.log(100)
setTimeout(() => {
    console.log(200)
}, 1000)
console.log(300)
console.log(400)
// 依次输出：100 300 400 200

// 同步  同步会阻塞代码执行
console.log(100)
alert(200)
console.log(300)
// 输出100后，弹框输出200，弹框确定关闭后，才会输出300

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

• 网络请求，如ajax图片加载

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

// 图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function () { // 图片加载完成执行函数输出loaded
	console.log('loaded')
}
img.src = '/xxx.png'  // 触发图片加载onload
console.log('end')

• 定时任务，如setTimeout, setInterval

// setTimeout   执行一次
console.log(100)
setTimeout(function () {
	console.log(200)
}, 1000)
console.log(300)

// setInterval   循环执行
console.log(100)
setInterval(function () {
	console.log(200)
}, 1000)
console.log(300)

Promise

早先 callback hell （回调地狱）

// 获取第一份数据
$.get(url1, (data1) => {
	console.log(data1)
	// 获取第二份数据
	$.get(url2, (data2) => {
		console.log(data2)
		//获取第三份数据
		$.get(url3, (data3) => {
			console.log(data3)
			// 还可能获取更多的数据。。。
		})
	})
})

使用 Promise 之后

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))
 

问题解答

setTimeout 笔试题

// setTimeout 笔试题
console.log(1)
setTimeout(function () {
    console.log(2)
}, 1000)
console.log(3)
setTimeout(function () {
    console.log(4)
}, 0)
console.log(5)
// 输出： 1 3 5 4 2

同步和异步的区别是什么？

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

手写用Promise 加载一张图片

 function loadImg(src) {
    const p = 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
        }
    )
    return p
}

// const url = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
// loadImg(url).then(img => {
//     console.log(img.width)
//     return img
// }).then(img => {
//     console.log(img.height)
// }).catch(ex => console.error(ex))

const url1 = 'https://profile.csdnimg.cn/3/C/F/3_weixin_40693643'
const url2 = 'https://g.csdnimg.cn/static/user-medal/blog_normal_medal.png'

loadImg(url1).then(img1 => {
    console.log(img1.width)
    return img1 // 普通对象
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2) // promise 实例
}).then(img2 => {
    console.log(img2.width)
    return img2
}).then(img2 => {
    console.log(img2.height)
}).catch(ex => console.error(ex))

异步应用场景

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