异步 - 知识点

单线程和异步

单线程

• JS 是单线程语言，没法创建线程（简单来说，只能同时做一件事，没法先等待一件事儿，然后同时做另外一件事）
• JS 可启动进程，来同时做多件事，如 Web Worker
• JS 执行和 DOM 渲染也是同一个线程

异步

• 如果有等待的情况（网络请求、定时任务），不能卡住
• 需要异步

// 异步
console.log(100)
setTimeout(function () {
    console.log(200)
}, 1000)
console.log(300)

// 同步
console.log(100)
alert(200)
console.log(300)

同步和异步

• 基于单线程
• 异步不会阻塞代码运行
• 同步会阻塞代码运行

应用场景

哪些地方可能会阻塞呢？

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

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

这里主要学习异步语法，ajax 的其他操作后面会详细讲解

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

图片加载，常用于前端统计打点。

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

callback hell

const url1 = '/data1.json'
const url2 = '/data2.json'
const url3 = '/data3.json'

// 获取第一份数据
$.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) => {
        $.get(url, (data) => {
            resolve(data)
        })
    })
}
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)
})