JS基础-异步

1、异步和同步的区别

• 是基于js是单线程的性质
• 异步是遇到任务如果在响应中，先执行其他的，直到响应成功，在执行这个任务，一般都有一个callback，回调函数
• 同步是执行一条一条来，会阻塞后面代码的执行

2、异步的使用场景

• 发送网络请求ajax，图片加载
• 定时任务

3、callback hell （回调地狱）

为了实现异步，所以有了回调，但是在没有Promise的时候，我们对于嵌套的回调（上一次的结果需要传给下一次使用,或者第一步完成后在执行第二步）很头疼，当嵌套了很多层的时候就会难以维护，这个就成为回调地狱，在工作中，我们一般处理的方式是使用promise或者async函数。

$get(url1, res1 => {
	console.log(res1)
    $get(url2, res2 => {
    	console.log(res2)
        $get(url3, res3 => {
        	console.log(res3)
        })
    })
})

4、手写一个Promise的图片加载

const img1 = 'https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png'
const img2 = 'https://img.alicdn.com/tfs/TB1VftpmnM11u4jSZPxXXahcXXa-144-144.png'
function LoadImg(src){
    return new Promise(
        (resolve,reject)=>{
            const img  = document.createElement('img')
            img.onload = ()=>{
                resolve(img)
            }
            img.onerror = ()=>{
                const err = new Error(`图片加载错误${img}`)
                reject(err)
            }
            img.src = src
        }
    )
}
LoadImg(img1).then(img1=>{
    console.log(img1.width)//212
    return img1
}).then(img1=>{
    console.log(img1.height)//48
    return LoadImg(img2)
}).then(img2=>{
    console.log(img2) //<img src="https://img.alicdn.com/tfs/TB1VftpmnM11u4jSZPxXXahcXXa-144-144.png">
}).catch(err=>{
    console.error(err)
})

5、setTimeout的面试题

console.log(1)
setTimeout(()=>{
    console.log(2)
},1000)
console.log(3)
setTimeout(()=>{
    console.log(4)
},0)
//1，3，4，2