JavaScript operating mechanism.md

• Some common macro tasks (main thread) and micro tasks (asynchronous tasks)

macrotask	microtask
setTimeout	process.nextTick
setInterval	Promises
setImmediate	Object.observe
requestAnimationFrame	-
I / O	-
UI rendering	-

JS operating mechanism

• In the case of a cyclic macro task, every time the current round of macro task execution is completed, the task queue is asked whether there is a task, there is execution, and there is no execution of the next round of macro task
  
• ES6—async + await The
  async function returns a promise object, that is, it will wait for you to continue the macro task after the await task is completed

async function test() {
    
    
    await new Promise((res) => {
    
    
        console.log(1);
        res('成功');
    }).then(() => {
    
    
        console.log(2);
    })
    console.log(3);
}
test(); //1->2->3

JS operation mechanism exercises

Question 1

function test() {
    
    
    console.log(1);
    setTimeout(() => {
    
    
        console.log(2); //遇见setTimeout 放入下一轮宏任务循环中
    }, 1);
    [3, 4, 5].forEach((ele) => {
    
    
        new Promise(res => {
    
    
            res(ele);
        }).then(res => {
    
    
            console.log(res); //遇见.then(fn)放入异步线程执行
        })
   })
 }
 test(); //1->3,4,5->2

Question 2

function test() {
    
    
    console.log(1);
    setTimeout(() => {
    
    
        console.log(2); //遇见setTimeout 放入下一轮宏任务循环中
    }, 1);
    setTimeout(() => {
    
    
        console.log(55);
        [3, 4, 5].forEach((ele) => {
    
    
            new Promise((res) => {
    
    
                console.log(99);
                res(ele);
            }).then((res) => {
    
    
                console.log(res); //遇见.then(fn)放入异步线程执行
           });
       });
    }, 0);
   }
test(); //1->2->55->99,99,99->3,4,5

Question 3

async function test() {
    
    
    console.log(1);
    setTimeout(() => {
    
    
       console.log(2);
    }, 1);
    setTimeout(() => {
    
    
        console.log(666);
        [3, 4, 5].forEach((ele) => {
    
    
            new Promise((res) => {
    
    
                res(ele);
            }).then((res) => {
    
    
                console.log(res);
            });
       });
       console.log(6);
    }, 0);
    await new Promise((res) => {
    
    
        res(7);
    }).then((res) => {
    
    
        console.log(res);
    });
}
test(); //1->7->2->666->6->3,4,5

Question 4

console.log("1");
setTimeout(function() {
    
    
    console.log("2");
    process.nextTick(function() {
    
    
        console.log("3");
    });
    new Promise(function(resolve) {
    
    
        console.log("4");
        resolve();
    }).then(function() {
    
    
        console.log("5");
    });
});

process.nextTick(function() {
    
    
    console.log("6");
});

new Promise(function(resolve) {
    
    
    console.log("7");
    resolve();
}).then(function() {
    
    
    console.log("8");
});

setTimeout(function() {
    
    
    console.log("9");
    process.nextTick(function() {
    
    
        console.log("10");
    });
    new Promise(function(resolve) {
    
    
        console.log("11");
        resolve();
    }).then(function() {
    
    
        console.log("12");
    });
});
//同步任务  1-> 7
//微任务① nextTick  6-> ②then  8
//宏任务① setTimeout()  2-> 4->3->5

//宏任务② setTimeout() 9->11->10->12
//第一轮  1->7->6->8

Question 5

Promise.resolve().then(() => {
    
    
    console.log('1')
    setTimeout(() => {
    
    
        console.log('2')
    }, 0)
})

setTimeout(() => {
    
    
    console.log('3')
    Promise.resolve().then(() => {
    
    
        console.log('4')
    })
}, 0)

//1->3->2->4

Question 6

console.log(1)
setTimeout(function() {
    
    
    console.log(2);
    let promise = new Promise(function(resolve, reject) {
    
    
        console.log(7);
        resolve()
    }).then(function() {
    
    
        console.log(8)
    });
}, 1000);

setTimeout(function() {
    
    
    console.log(10);
    let promise = new Promise(function(resolve, reject) {
    
    
        console.log(11);
        resolve()
    }).then(function() {
    
    
        console.log(12)
    });
}, 0);

let promise = new Promise(function(resolve, reject) {
    
    
    console.log(3);
    resolve()
}).then(function() {
    
    
    console.log(4)
}).then(function() {
    
    
    console.log(9)
});

console.log(5)

//主线程任务 1->3->5
//宏任务① setTimeout 2->7->8
//宏任务② setTimeout 10->11->12
//微任务 promise  4->9
//第一轮 1->3->5->4->9
//第二轮 10->11->12
//第三轮 2->7->8

Question 7

console.log("AAAA"); //①
setTimeout(() => console.log("BBBB"), 1000); //⑥
const start = new Date();
while (new Date() - start < 3000) {
    
    }

console.log("CCCC"); //②
setTimeout(() => console.log("DDDD"), 0); //⑦
new Promise((resolve, reject) => {
    
    
        console.log("EEEE"); //③
        foo.bar(100);
    })
    .then(() => console.log("FFFF"))
    .then(() => console.log("GGGG"))
    .catch(() => console.log("HHHH")); //⑤
console.log("IIII"); //④

setTimeout(function() {
    
    
    console.log('setTimeout'); //⑧
})
//AAAA  CCCC  EEEE  IIII  HHHH BBBB DDDD  setTimeout

Question 8

async function async1() {
    
    
    console.log("AAAA"); //②
    async2();
    console.log("BBBB"); //④
}
async function async2() {
    
    
    console.log("CCCC"); //③
}
console.log("DDDD"); //①
setTimeout(function() {
    
    
    console.log("FFFF"); //⑧
}, 0);
async1();
new Promise(function(resolve) {
    
    
    console.log("GGGG"); //⑤
    resolve();

}).then(function() {
    
    
    console.log("HHHH"); //⑦

});
console.log("IIII"); //⑥

//这道题的坑就在于 async中如果没有await，那么它就是一个纯同步函数
//DDDD AAAA CCCC BBBB  GGGG IIII HHHH FFFF

Question 9

console.log('start'); //①第一轮整体代码
setTimeout(() => {
    
    
    console.log('children2'); //③第二轮宏任务
    Promise.resolve().then(() => {
    
    
        console.log('children3'); //④微任务
    })
}, 0); //宏任务
new Promise((resolve, reject) => {
    
    
    console.log('children4'); //②第一轮整体代码
    setTimeout(() => {
    
    
        console.log('children5'); //⑤第三轮宏任务
        resolve('children6') //执行微任务
    }, 0); //宏任务
}).then((res) => {
    
     //.then要有resolve才会执行，resolve在setTimeout里暂不执行
    console.log('children7');
    setTimeout(() => {
    
    
        console.log('res');
    }, 0)

});
//start children4 children2 children3 children5 children7 children6

Question 10

• Promise's.then() will be executed only after resolve()

const p = function() {
    
    
    return new Promise((resolve, reject) => {
    
    
        const p1 = new Promise((resolve, reject) => {
    
    
            setTimeout(() => {
    
    
                resolve(1)
            }, 0);
            resolve(2) //resolve2会比resolve1先执行resolve1延迟执行，2执行完1就没了因为promise状态已改变
        })
        p1.then((res) => {
    
    
            console.log(res) //③微任务
        })
        console.log(3); //①第一轮整体代码
        resolve(4) //④微任务
    })
}
p().then((res) => {
    
    
    console.log(res);
})
console.log('end'); //②第一轮整体代码
//3 end 2 4

Blog post reference 1
Blog post reference 2
Detailed explanation of JavaScript operating mechanism: Let's talk about the asynchronous explanation of Event Loop