|
|
@@ -0,0 +1,174 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <!--
|
|
|
+ js是单线程，同一个时间只能做一件事，执行顺序：自上之下执行。所以，实现异步通过eventLoop。
|
|
|
+ 机制eventLoop
|
|
|
+ 事件循环机制。js引擎在一次事件循环中，会先执行js线程的主任务，然后会去查找是否有微任务microtask（promise），
|
|
|
+ 如果有那就优先执行微任务，如果没有，在去查找宏任务macrotask（setTimeout、setInterval）进行执行
|
|
|
+ <b>浏览器eventLoop和node eventLoop</b>
|
|
|
+ js是单线程的，但是ajax和setTimeout在浏览器里面会多开一个线程
|
|
|
+ <b>宏任务：</b>setTimeout setInterval setImmediate(ie下 生效) MessageChannel(消息通道)
|
|
|
+ <b>微任务：</b>Promise.then MutationObserver (监听dom节点更新完毕) process.nextTick()
|
|
|
+ 小结:代码从上到下执行，会先执行同步的代码，再执行微任务，等到宏任务有没有到时间，
|
|
|
+ 时间到了的宏任务放到宏任务队列，微任务执行完毕之后，
|
|
|
+ 会从宏任务队列中取出一个宏任务会放到当前的浏览器的执行环境中执行，当前执行环境都执行完毕后，
|
|
|
+ 会先去清空微任务。
|
|
|
+ -->
|
|
|
+ <script>
|
|
|
+ /**
|
|
|
+ * eventLoop 事件循环机制 js
|
|
|
+ * js单线程语言 弱语言类型 执行：自上而下
|
|
|
+ * 执行逻辑：
|
|
|
+ * 同步代码
|
|
|
+ * 异步代码：宏任务 微任务
|
|
|
+ * 同步 > 微任务 > 宏任务
|
|
|
+ * 宏任务：setTimeOut setInterVal 事件绑定 IO
|
|
|
+ * 微任务: promise.then nextTick
|
|
|
+ */
|
|
|
+ // setTimeout(function () {
|
|
|
+ // console.log("1");
|
|
|
+ // });
|
|
|
+ // new Promise(function (resolve) {
|
|
|
+ // console.log("2");
|
|
|
+ // resolve();
|
|
|
+ // }).then(function () {
|
|
|
+ // console.log("3");
|
|
|
+ // });
|
|
|
+ // console.log("4");
|
|
|
+
|
|
|
+ // console.log(1)
|
|
|
+ //宏1
|
|
|
+ // setTimeout(function(){
|
|
|
+ // console.log(2);
|
|
|
+ // let promise = new Promise(function(resolve, reject) {
|
|
|
+ // console.log(7);
|
|
|
+ // resolve()
|
|
|
+ // }).then(function(){
|
|
|
+ // console.log(8)
|
|
|
+ // });
|
|
|
+ // },1000);
|
|
|
+ // //宏2
|
|
|
+ // 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)//微1
|
|
|
+ // }).then(function(){
|
|
|
+ // console.log(9)//微2
|
|
|
+ // });
|
|
|
+ // console.log(5)
|
|
|
+ // 1 3 5 4 9 10 11 12 2 7 8
|
|
|
+
|
|
|
+ // console.log('1');
|
|
|
+ // setTimeout(function() {
|
|
|
+ // console.log('2');
|
|
|
+ // new Promise(function(resolve) {
|
|
|
+ // console.log('4');
|
|
|
+ // resolve();
|
|
|
+ // }).then(function() {
|
|
|
+ // console.log('5')
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // new Promise(function(resolve) {
|
|
|
+ // console.log('7');
|
|
|
+ // resolve();
|
|
|
+ // }).then(function() {
|
|
|
+ // console.log('8')
|
|
|
+ // })
|
|
|
+ // setTimeout(function() {
|
|
|
+ // console.log('9');
|
|
|
+ // new Promise(function(resolve) {
|
|
|
+ // console.log('11');
|
|
|
+ // resolve();
|
|
|
+ // }).then(function() {
|
|
|
+ // console.log('12')
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // setTimeout(() => {
|
|
|
+ // console.log(1)
|
|
|
+ // }, 0)
|
|
|
+ // new Promise((resolve) => {
|
|
|
+ // console.log(2)
|
|
|
+ // resolve()
|
|
|
+ // }).then(() => {
|
|
|
+ // console.log(3)
|
|
|
+ // }).then(() => {
|
|
|
+ // console.log(4)
|
|
|
+ // })
|
|
|
+ // console.log(5)
|
|
|
+ // const first = () =>
|
|
|
+ // new Promise((resolve, reject) => {
|
|
|
+ // console.log(3);
|
|
|
+ // let p = new Promise((resolve, reject) => {
|
|
|
+ // console.log(7);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // console.log(5);
|
|
|
+ // resolve(6);
|
|
|
+ // }, 0);
|
|
|
+ // resolve(1);
|
|
|
+ // });
|
|
|
+ // resolve(2);
|
|
|
+ // p.then((arg1) => {
|
|
|
+ // console.log(arg1);
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+
|
|
|
+ // first().then((arg2) => {
|
|
|
+ // console.log(arg2);
|
|
|
+ // });
|
|
|
+ // console.log(4);
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log("0");
|
|
|
+ }, 0);
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ console.log("1"); // 1
|
|
|
+ resolve();
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ console.log("2"); //微1
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ console.log("3"); // Promise1
|
|
|
+ resolve();
|
|
|
+ })
|
|
|
+ .then(
|
|
|
+ () => {
|
|
|
+ console.log("4");
|
|
|
+ },
|
|
|
+ )
|
|
|
+ .then(
|
|
|
+ () => {
|
|
|
+ console.log("5");
|
|
|
+ },
|
|
|
+ );
|
|
|
+ })
|
|
|
+ .then(
|
|
|
+ () => {
|
|
|
+ console.log("6");
|
|
|
+ },
|
|
|
+ () => {}
|
|
|
+ );
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ console.log("7"); //2
|
|
|
+ resolve();
|
|
|
+ }).then(() => {
|
|
|
+ console.log("8");
|
|
|
+ });
|
|
|
+ // 1 7 2 3 8
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e