|
|
@@ -0,0 +1,190 @@
|
|
|
+<!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>
|
|
|
+ <script>
|
|
|
+ // js是单线程，同一个时间只能做一件事，执行顺序：自上之下执行。所以，实现异步通过eventLoop。
|
|
|
+ // 机制eventLoop
|
|
|
+ // 事件循环机制。
|
|
|
+ // js引擎在一次事件循环中，会先执行js线程的主任务，然后会去查找是否有微任务microtask（promise），
|
|
|
+ // 如果有那就优先执行微任务，如果没有，在去查找宏任务macrotask（setTimeout、setInterval）进行执行
|
|
|
+ // js是单线程的，但是ajax和setTimeout在浏览器里面会多开一个线程
|
|
|
+ // 宏任务:setTimeout setInterval setImmediate(ie下 生效) MessageChannel(消息通道)
|
|
|
+ // 微任务:Promise.then MutationObserver (监听dom节点更新完毕) process.nextTick()
|
|
|
+ // 小结:
|
|
|
+ // 代码从上到下执行，
|
|
|
+ // 会先执行同步的代码，再执行异步，
|
|
|
+ // 立即检查微任务队列 一次性清空所有的微任务
|
|
|
+ // 微任务执行完毕之后，再从宏任务中去取一个宏任务队列执行
|
|
|
+
|
|
|
+ // 先执行主线程同步代码（主任务栈清空）
|
|
|
+ // 立即检查微任务队列，一次性清空所有微任务
|
|
|
+ // 微任务全部执行完，再从宏任务队列取出一个宏任务执行
|
|
|
+ // 这个宏任务执行完后，再次清空微任务队列
|
|
|
+ // 不断循环，就是事件循环 EventLoop
|
|
|
+ // setTimeout(function () {
|
|
|
+ // console.log("1");
|
|
|
+ // });
|
|
|
+ // new Promise(function (resolve) {
|
|
|
+ // console.log("2");
|
|
|
+ // resolve();
|
|
|
+ // }).then(function () {
|
|
|
+ // console.log("3");
|
|
|
+ // });
|
|
|
+ // console.log("4");
|
|
|
+
|
|
|
+
|
|
|
+ // 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)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 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(function () { console.log(1), 0 });
|
|
|
+ // new Promise(function (resolve) {
|
|
|
+ // console.log(2); // 2
|
|
|
+ // for (var i = 0; i < 10000; i++) {
|
|
|
+ // if (i == 9999) {
|
|
|
+ // resolve()
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // console.log(3)
|
|
|
+ // }).then(function () {
|
|
|
+ // console.log(4)
|
|
|
+ // })
|
|
|
+ // console.log(5)
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log("0");
|
|
|
+ }, 0);
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ console.log("1");
|
|
|
+ resolve();
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ console.log("2");
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ console.log("3");
|
|
|
+ resolve();
|
|
|
+ })
|
|
|
+ .then(
|
|
|
+ () => {
|
|
|
+ console.log("4");
|
|
|
+ },
|
|
|
+ )
|
|
|
+ .then(
|
|
|
+ () => {
|
|
|
+ console.log("5");
|
|
|
+ },
|
|
|
+ );
|
|
|
+ })
|
|
|
+ .then(
|
|
|
+ () => {
|
|
|
+ console.log("6");
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ // console.log("10")
|
|
|
+ }
|
|
|
+ );
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ console.log("7");
|
|
|
+ resolve();
|
|
|
+ }).then(() => {
|
|
|
+ console.log("8");
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
zheng