Js异步和单线程

首先Js是一款单线程语言,只能去做一个事情。
异步就是用来处理阻塞的,而同步才导致了阻塞这种现象。
同步:你在取票。前面有很多人,你需要排队等待,但是不能做别的。
异步:在排队的时候,可以玩手机。

1.应用场景

网络请求:如AJAX图片加载

console.log('start')//打印start     
$.get('./data.json',function(data1){//执行网络请求
    console.log(data1)
})
console.log('end')//最后打印结果

定时任务:如setTimeout
当有两个出现的时候,CPU是空闲的,你不能浪费CPU的时间。所以就有了异步的出现。

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

2.callback hell 呼叫地狱

//获取第一份数据
$.get(url, (data1) => {
    console.log(data1);
    //获取第二份数据
    $.get(url, (data2) => {
        console.log(data2);
        //获取第三份数据
        $.get(url, (data3) => {
            console.log(data3);
            //获取第N份数据
        })

    })
})

callback hell 促使了 Promise的产生。
那么Promise产生,就解决了callback嵌套的形式,变成了一种管道式的串联的形式

const url1='/data1.json'
const url2='/data2.json'
const url3='/data3.json'
getData(ur1).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 笔试题
console.log(1)
setTimeout(function () {
    console.log(2)
}, 1000)
console.log(3)
setTimeout(function () {
    console.log(4)
}, 0)
console.log(5)

例题解析
首先:有异步先把异步放下,先看其他的
所以先打印1,3,5
然后:看异步,有2和4。2延迟1s,4无延迟,4先打印。
所以打印4,2
答案为:1.3.5.4.2

你可能感兴趣的:(Js异步和单线程)