Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
web0331
10
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

fix:js

e 1 долоо хоног өмнө
parent
47712c9f2a
commit
65cfb2e3a3
2 өөрчлөгдсөн 147 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 90 0
      4.js高级/20.EventLoop.html
  2. 57 0
      4.js高级/21.async await.html

+ 90 - 0
4.js高级/20.EventLoop.html
Файл харах 

@@ -0,0 +1,90 @@
 
+<!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>
 
+      //   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 238
 
+
 
+      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);
 
+    </script>
 
+  </body>
 
+</html>

+ 57 - 0
4.js高级/21.async await.html
Файл харах 

@@ -0,0 +1,57 @@
 
+<!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>
 
+      /**
 
+       * es6 => Promise => 回调地狱
 
+       * es7 => async await
 
+       * async 在函数前添加async 使函数变成异步函数
 
+       * await 不是说一定要和async一起使用  后面一般跟表达式 如何async一起使用的话  await后是微任务
 
+       */
 
+      //   console.log(2);
 
+      //   setTimeout(() => {
 
+      //     console.log(3);
 
+      //   }, 0);
 
+      //   async function fn1() {
 
+      //     throw new Error("报错")
 
+      //     // return '111';
 
+      //   }
 
+      //   fn1().then(()=>{
 
+      //     console.log(2)
 
+      //   })
 
+      //   fn1().catch(()=>{
 
+      //     console.log("3")
 
+
 
+      //   })
 
+      console.log(1);
 
+      function count(num) {
 
+        return new Promise((resolve, reject) => {
 
+          setTimeout(() => {
 
+          
+            resolve(num * 2);
 
+          }, 1000);
 
+        });
 
+      }
 
+      setTimeout(() => {
 
+        console.log(3);
 
+      }, 0);
 
+      async function fn2() {
 
+        try {
 
+          let total1 = await count(2);
 
+          let total2 = await count(20);
 
+          let total3 = await count(200);
 
+          console.log(total1, total2, total3);
 
+        } catch {
 
+          console.log("失败");
 
+        }
 
+      }
 
+      fn2();
 
+      console.log("完成");
 
+    </script>
 
+  </body>
 
+</html>