首页 🚓JavaScript

回调地狱

回调函数会引起难以维护的弊端

//回调函数,按道理是谁时间短谁先出来
//现在让先吃火锅,之后喝奶茶
function getTea(fn) {
        setTimeout(() => {
          fn('奶茶');
        }, 500);
      }
      function getHotpot(fn) {
        setTimeout(() => {
          fn('火锅');
        }, 1500);
      }

//谁时间短谁先出来
     getTea(function (data) {
          console.log(data);
        });
     getHotpot(function (data) {
          console.log(data);
        });
//如果我还想干其他的事情比如吃饭,回调函数会引起难以维护的弊端,需要不停的嵌套
          getHotpot(function (data) {
        console.log(data);
        getTea(function (data) {
          console.log(data);
        });
        getTea(function (data) {
          console.log(data);
        });
        getTea(function (data) {
          console.log(data);
        });
        getTea(function (data) {
          console.log(data);
        });
      });
      });
<!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>
      function getTea(fn) {
        setTimeout(() => {
          fn('奶茶');
        }, 500);
      }
      function getHotpot(fn) {
        setTimeout(() => {
          fn('火锅');
        }, 1500);
      }

      getHotpot(function (data) {
        console.log(data);
        getTea(function (data) {
          console.log(data);
        });
        getTea(function (data) {
          console.log(data);
        });
        getTea(function (data) {
          console.log(data);
        });
        getTea(function (data) {
          console.log(data);
        });
      });
    </script>
    <script>
      function getTea() {
        return new Promise(function (resolve) {
          setTimeout(() => {
            resolve('奶茶');
          }, 1000);
        });
      }
      /*
      getTea是一个promise对象,promise就可以用then
      */
      function getHotpot() {
        return new Promise(function (resolve) {
          setTimeout(() => {
            resolve('火锅');
          }, 2000);
        });
      }
      //使用Promise 先吃火锅再喝奶茶,,,链式操作
      // getHotpot()
      //   .then(function (data) {
      //     console.log(data);
      //     return getTea();
      //   })
      //   .then(function (data) {
      //     console.log(data);
      //   });
      //  async函数
      // 使异部程序更像同步程序
      async function getData() {
        //await后面加一个promise对象,就可以直接获取resolve传递出来的异步数据,getHotpot返回的是一个promise对象
        let hotPot = await getHotpot();
        console.log(hotPot);
        let tea = await getTea();
        console.log(tea);
      }
      getData();
    </script>
  </body>
</html>



文章评论

目录