fengchuanyu 2 giorni fa
parent
commit
0b28c76173
3 ha cambiato i file con 172 aggiunte e 0 eliminazioni
  1. 41 0
      8_ES6/29_async_await.html
  2. 40 0
      8_ES6/30_eventloop.html
  3. 91 0
      8_ES6/练习题5_eventloop.html

+ 41 - 0
8_ES6/29_async_await.html

@@ -0,0 +1,41 @@
+<!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>
+        // async await
+
+        // function foo(){
+        //     setTimeout(() => {
+        //         console.log("hello world");
+        //     }, 2000);
+        //     console.log("你好");
+        // }
+        // foo()
+
+        // async await 语法糖
+        // async 可以将行数改为异步函数
+        // await 一定要写在 async 函数内 async/await一定要组合使用
+        async function foo() {
+            // 等待异步操作完成
+            // 异步操作完成后,继续执行后续代码
+            // await后边需要等待一个Promise对象
+            await new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    console.log("hello world");
+                    resolve();
+                }, 2000);
+            })
+            console.log("你好");
+        }
+        foo()
+    </script>
+</body>
+
+</html>

+ 40 - 0
8_ES6/30_eventloop.html

@@ -0,0 +1,40 @@
+<!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>
+        // promise 可以直接后边写 then和catch方法
+        // new Promise((resolve,reject)=>{
+        //     resolve("3")
+        // }).then((res)=>{
+        //     console.log(res);
+        // }).catch((err)=>{
+        //     console.log(err);
+        // })
+
+
+        console.log("1");
+        setTimeout(() => {
+            console.log("2");
+        }, 0);
+
+        new Promise((resolve, reject) => {
+            // setTimeout(() => {
+                resolve("3")
+            // }, 0);
+        }).then((res) => {
+            console.log(res);
+        })
+        console.log("4");
+
+
+    </script>
+</body>
+
+</html>

+ 91 - 0
8_ES6/练习题5_eventloop.html

@@ -0,0 +1,91 @@
+<!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>
+        // 第一题
+
+        console.log('1');
+        setTimeout(function () {
+            console.log('2');
+        }, 0);
+        console.log('3');
+
+        // 第二题 
+
+        console.log('1');
+        setTimeout(function () {
+            console.log('2');
+            Promise.resolve().then(function () {
+                console.log('3');
+            });
+        }, 0);
+        Promise.resolve().then(function () {
+            console.log('4');
+        });
+        console.log('5');
+
+        // 第三题
+
+        // 同步任务,输出 '1'
+        console.log('1');
+        setTimeout(() => {
+            // 定时器回调函数,宏任务
+            console.log('2 - Macro Task');
+            // 添加一个微任务到队列中
+            Promise.resolve().then(() => console.log('3 - Micro Task'));
+        }, 0);
+        // 添加一个微任务到队列中
+        Promise.resolve().then(() => console.log('4 - Micro Task'));
+        // 同步任务,输出 '5'
+        console.log('5');
+
+        // 第四题
+        console.log('Start');
+        setTimeout(() => {
+            console.log('Timeout 5');
+        }, 100);
+        new Promise((resolve) => {
+            console.log('Promise 4');
+            resolve();
+        }).then(() => {
+            console.log('Promise 5');
+        });
+        console.log('End');
+
+        // 第五题
+
+        console.log('Start');
+        setTimeout(() => {
+            console.log('Timeout 2');
+        }, 100);
+        for (let i = 0; i < 5; i++) {
+            console.log(i);
+        }
+
+        // 第六题
+
+        console.log('Start');
+        setTimeout(() => {
+            console.log('Timeout 7');
+        }, 0);
+        async function asyncFunc() {
+            console.log('Async 1');
+            await new Promise((resolve) => {
+                console.log('Promise 8');
+                resolve();
+            });
+            console.log('Async 2');
+        }
+        asyncFunc();
+        console.log('End');
+    </script>
+</body>
+
+</html>