fengchuanyu vor 8 Monaten
Ursprung
Commit
720a299dd8

+ 23 - 6
5_ES6/24_异步.html

@@ -1,20 +1,37 @@
 <!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 src="./ajax.js"></script>
     <script>
 
-        var a = 10;
-        setTimeout(function(){
-            console.log(a)
-        }, 1000);
-        a++;
-        console.log(a)
+        // var a = 10;
+        // setTimeout(function(){
+        //     console.log(a)
+        // }, 1000);
+        // a++;
+        // console.log(a)
+        
+        //callback hell  回调地狱
+        ajaxFun("./data/a.json", function (res) {
+            console.log(res)
+            ajaxFun("./data/b.json", function (res) {
+                console.log(res)
+                ajaxFun("./data/c.json", function (res) {
+                    console.log(res)
+                })
+            })
+        })
+
+
 
     </script>
 </body>
+
 </html>

+ 24 - 0
5_ES6/26_promise.html

@@ -0,0 +1,24 @@
+<!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>
+        var pro1 = new Promise(function(resolve,reject){
+            setTimeout(function(){
+                // resolve("成功了");
+                reject();
+            },1000)
+        })
+
+        pro1.then(function(res){
+            console.log(res);
+        }).catch(function(){
+            console.log("失败了");
+        })
+    </script>
+</body>
+</html>

+ 3 - 0
5_ES6/data/a.json

@@ -0,0 +1,3 @@
+{
+  "name":"a"
+}

+ 3 - 0
5_ES6/data/b.json

@@ -0,0 +1,3 @@
+{
+  "name":"b"
+}

+ 3 - 0
5_ES6/data/c.json

@@ -0,0 +1,3 @@
+{
+  "name":"c"
+}

+ 24 - 1
5_ES6/练习题6_ajax.html

@@ -6,11 +6,34 @@
     <title>Document</title>
 </head>
 <body>
+    <ul>
+        
+    </ul>
     <script src="./ajax.js"></script>
     <script>
+        var oUl = document.getElementsByTagName("ul")[0];
+
         ajaxFun("./data/data1.json",function(res){
-            console.log(res);
+            var resArr = res.data;
+            var liStr = "";
+            for(var i=0;i<resArr.length;i++){
+                liStr += `<li>${resArr[i].jrid} : ${resArr[i].levelname}</li>`
+            }
+            oUl.innerHTML = liStr;
         })
+
+
+        // var arr = ['a','b','c','d','e'];
+        // oUl.innerHTML="<li>hello</li>";
+        // var oLi = document.createElement("li");
+        // oLi.innerText = "world";
+        // oLi.style.color = 'red';
+        // oUl.append(oLi);
+        // var str = "";
+        // for(var i=0;i<arr.length;i++){
+        //     str +=  "<li>"+arr[i]+"</li>";
+        // }
+        // oUl.innerHTML = str;
     </script>
 </body>
 </html>

+ 91 - 0
5_ES6/练习题7_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>