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

---

题目

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

2.手写promise加载一张图片

3.前端使用异步的场景

4.场景题setTimeout

知识点

1.单线程和异步

2.应用场景

3.Callback hell和promise

扫描二维码关注公众号，回复： 11066169 查看本文章

---

一、单线程和异步

1.JS是单线程语言，只能同时做一件事情
2.浏览器和nodejs已经支持js启动线程，如web worker
3.JS和DOM渲染同一个线程，因为JS可以修改DOM结构
4.遇到等待（网络请求，定时人物）不能卡住
5.需要异步
6.回调callback hell 函数形式

// 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
 
console.log(100)
alert(200)
console.log(300)
// 结果 100 弹框200点击之后才会出现 300（卡住）

先执行同步任务，到一定事件在执行回调函数
异步不会阻塞后面代码的执行，但是同步会

二、应用场景

1.网络请求，如Ajax图片加载

// ajax
console.log('start')
$get('./data1.json',function(data1){   // 回调函数网络请求
    console.log(data1)
})
console.log('end')
 
// 图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function () {    // callback
    console.log('onload')
}
img.src = 'xx.png'
console.log('end')

2.定时任务，如setTimeout

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

三、callbeck hell（回调地狱）和promise

callback hell:一种越陷越深的嵌套形式

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

解决方法：使用promise

// 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))    // 串联形式

四、问题解答

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

异步是基于JS单线程语言

异步不会阻塞代码的执行

同步会阻塞代码的执行

2.手写promise加载一张图片

function loadImg(src) {
    const p = new Promise(  
        (resolve, reject) => {   // 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    // img传入then里
// }).then(img => {
//     console.log(img.height)
// }).catch(err => console.error(err))
const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'
loadImg(url1).then(img1 => {
    console.log(img1.width)
    return img1 // return普通对象，then直接接收
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2) // promise 实例，则then之后接收到的是loadImg()执行完的img对象
}).then(img2 => {
    console.log(img2.width)
    return img2
}).then(img2 => {
    console.log(img2.height)
}).catch(err => console.error(err))

3.前端使用异步的场景

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

4.场景题setTimeout

// setTimeou笔试题
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

五、小结

1.单线程和异步，异步和同步的区别
2.前端异步应用场景，网络请求和定时任务
3.promise解决 callback hell