Promise-04 微任务和宏任务

作者: 呆桃冲鸭冲鸭 | 来源:发表于2020-09-11 07:10 被阅读0次

Promise-04 微任务和宏任务
微任务和宏任务@小四@王云飞
宏任务和微任务
宏任务和微任务
宏任务和微任务
宏任务和微任务
# 宏任务和微任务
微任务和宏任务
宏任务和微任务
2018-08-15 微任务宏任务 MicroTask Mac

宏任务： setTimeout、setInterval...
微任务：Promise、MutationObserver...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生promise</title>
</head>
<body>
    
</body>
<!-- 宏任务  script-->
<script>
    console.log("Promise=====444");
    // 宏任务
    setTimeout(()=>{
        console.log("Promise=====333");
    },0);
    // 三种状态 1.pending 2.fulfilled 3.rejected
    let p = new Promise((resolve,reject)=>{
        console.log("Promise=====111");
        resolve("suc...");
        // rejected("err...");
    });
    //微任务
    p.then(res=>{
        console.log("Promise=====222");
    },err=>{
        console.log(err);
    });
    // Promise=====444
    // Promise=====111
    // Promise=====222
    // Promise=====333
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my</title>
</head>
<body>
    <p>test my</p>
</body>
<script type="module">
    //  type="module" 严格模式 
    import MyPromise from './promise.js';
    console.log("Promise=====444");
    // 宏任务
    setTimeout(()=>{
        console.log("Promise=====333");
    },0);
    // 三种状态 1.pending 2.fulfilled 3.rejected
    let myP = new MyPromise((resolve,reject)=>{
        console.log("Promise=====111");
        resolve("suc...");
        // reject("err...");
    });
    //微任务
    myP.then(res=>{
        console.log("Promise=====222");
    },err=>{
        console.log(err);
    });

</script>
</html>

export default class MyPromise{
    constructor(handle){
        this.state = "pending";
        this.result = undefined;
        this.resolveFnArr = [];
        this.rejectFnArr = [];
        handle(this._resolve.bind(this),this._reject.bind(this));
    };
    _resolve(val){
        this.state = "fulfilled";
        this.result = val;
        // 执行then的回调 变成微任务执行
        const run = () => {
            let cb;
            while(cb = this.resolveFnArr.shift()){
                cb && cb(val);
            };
        };
        const observer = new MutationObserver(run);
        observer.observe(document.body,{attributes: true});
        document.body.setAttribute("my",Math.random());
    };
    _reject(val){
        this.state = "rejected";
        this.result = val;
        // 执行then的回调 变成微任务执行
        const run = () => {
            let cb;
            while(cb = this.rejectFnArr.shift()){
                cb && cb(val);
            };
        };
        const observer = new MutationObserver(run);
        observer.observe(document.body,{attributes: true});
        document.body.setAttribute("my",Math.random());
    };
    then(onResolved,onRejected){
        // 异步onResolved,onRejected不会立即执行；是在调取_resolve、_reject再执行
        // 保存onResolved、onRejected
        this.resolveFnArr.push(onResolved)
        this.rejectFnArr.push(onRejected)
    };
}

打印结果