美文网首页
Js异步和单线程

Js异步和单线程

作者: 素明诚 | 来源:发表于2020-10-19 12:20 被阅读0次

    首先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异步和单线程

          本文链接:https://www.haomeiwen.com/subject/hnbfpktx.html