【西安校区】JS前端面试-异步和单线程 - 黑马程序员技术交流社区

[Java] 纯文本查看 复制代码

// 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（卡住）

[Java] 纯文本查看 复制代码

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

[Java] 纯文本查看 复制代码

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

[Java] 纯文本查看 复制代码

//callback hell

// 获取第一份数据

$get(url1, (data1) => {

    console.log(data1)

    // 获取第二份数据

    $get(url2, (data2) => {

        console.log(data2)

        // 获取第三份数据

        $get(url3, (data3) => {

            console.log(data3)

            // 获取更多数据

        })

    })

})

[Java] 纯文本查看 复制代码

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

[Java] 纯文本查看 复制代码

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

[Java] 纯文本查看 复制代码

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