js_async_await_eventLoop_微任务_宏任务

async

• async是一个函数。
• async函数执行以后返回一个promise对象。
• async函数中return 的结果需要通过这个函数返回的promise对象中then里面的函数参数获取。

async function abc(){
   console.log("aaa");//aaa
    return 10;
}
abc().then(function(value){
    console.log(value);//10
});

//换成Promise的写法是
Promise.resolve(10).then(function(num){
    console.log(num);//10
})

await

• await 必须写在 async 函数中，await 的作用是阻塞式同步，也就是执行到await 时做等待完成后再继续向后执行（将异步转成同步）。
• await 只能用于 promise 对象的前面。

async function abc(){
    console.log("aaa");//第一次打印
    //完成了阻塞式同步，异步转同步
    await Promise.resolve().then(function(){
        console.log("bbb");//第二次打印
    })
    console.log("ccc");//第三次打印
}
abc();

使用 async 和 await 完成图片的预加载

function loadImage(src){
    return new Promise(function(resolve,reject){
        let img=new Image();
        img.src=src;
        img.onload=function(){
            resolve(img);
        }
        img.onerror=function(){
            reject("地址错误");
        }
    })
}

async function abc(){
    let arr=[];
    for(let i=3;i<80;i++){
        //因为await是一个阻塞式同步，因此加载完一张图片后，才循环到下一个一次
        await loadImage(`./img/${i}-.jpg`).then(function(img){
            arr.push(img);
        })
    }
    //return的结果通过返回的promise对象中then里面的函数参数获取。
    return arr;
}

var p=abc();
p.then(function(list){
    console.log(list);//返回图片数组
});
console.log(p);//Promise对象

await 和 yield

• 生成器函数中的 yield 相当于断点，遇到 yield 时会停止不执行，当前操作执行完成后，才会往下执行。
• 生成器函数用 for of 来遍历。
• for 循环中用 break 来代替 return。

关于生成器函数的详细内容：https://blog.csdn.net/Charissa2017/article/details/103937710

function* fn(){
    var arr=[];
    for(let i=3;i<80;i++){
        // 完成阻塞式同步
        yield loadImage(`./img/${i}-.jpg`);
    }
}

var f=fn();
for(let item of f){
    if(item.constructor!==Promise) break;
    item.then(function(img){
        console.log(img.src);
    })
}

eventLoop

• 同步操作，按照从上到下的顺序依次执行，异步操作的任务可以分为微任务和宏任务。
• 微任务有：promise、async、await。
• 宏任务有：setTimeout、setInterval。
• 当遇到微任务时，将当前需要操作的内容放在当前任务列的最底端。
• 当遇到宏任务时，将当前需要操作的内容放在下一个任务列的最顶端，每次遇到宏任务，都会新建一个任务列，并放在其最顶端。
• setTimeout 和 setInterval，当倒计时结束时，才会将内容放在下一个任务的最顶端。
• promoise 中 then 里的操作是异步，没有 then 外面的是同步。
• 宏任务当中的微任务先执行，微任务当中的宏任务后执行。

同步操作：

document.addEventListener("nihao",nihaoHandler);
console.log("aaa");
document.dispatchEvent(new Event("nihao"));
console.log("bbb");
function nihaoHandler(){
    console.log("ccc");
}
//打印结果为：aaa ccc bbb 

案例1：

console.log("aaa");
setTimeout(function(){
    console.log("bbb");
},0);
Promise.resolve().then(function(){
    console.log("ccc");
})
console.log("ddd");
//打印结果为：aaa ddd ccc bbb 

执行过程为：

案例2：

setTimeout(function(){
   Promise.resolve().then(function(){
        console.log("bbb");
    })
},0)
Promise.resolve().then(function(){
    setTimeout(function(){
        console.log("aaa");
    },0)
});
//打印结果为：bbb aaa

执行过程为：