javascript疑难问题---18、回调函数做异步操作

一、总结

一句话总结：

回调函数做异步操作可以通过回调函数来获取异步操作的返回值

function async_fun(param,callback){
  setTimeout(()=>{
      callback('参数：'+param);
      //return '参数：'+param;
  },1000);
}

async_fun('操作1',function (a) {
  console.log(a);
});

1、回调函数可以获取异步操作的返回值的原理是什么？

回调函数作为实参传递给了异步函数的形参，所以回调函数是在异步函数之内执行，那么回调函数自然可以获取异步操作的结果

function async_fun(param,callback){
  setTimeout(()=>{
      callback('参数：'+param);
      //return '参数：'+param;
  },1000);
}

async_fun('操作1',function (a) {
  console.log(a);
});

2、什么是回调地狱？

当用回调函数来做异步操作的时候，如果需要实现一个异步操作之后再执行另外的异步操作，那么后一个异步操作需要嵌套在前一个异步操作的回调函数里面，当这样嵌套的层数多了，就变成回调地狱了

//异步操作1做完了再做异步操作2
//异步操作2做完了再做异步操作3
//异步操作3做完了再做异步操作4
function async_fun(param,callback){
  setTimeout(()=>{
      callback('参数：'+param);
      //return '参数：'+param;
  },1000);
}

async_fun('操作1',function (a) {
  console.log(a);
  async_fun('操作2',function (a) {
      console.log(a);
      async_fun('操作3',function (a) {
          console.log(a);
          async_fun('操作4',function (a) {
              console.log(a);
          });
      });
  });
});

二、回调函数做异步操作

博客对应课程的视频位置：18、回调函数做异步操作
https://www.fanrenyi.com/video/4/210

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>回调函数做异步操作</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 
11 回调函数做异步操作可以通过回调函数来获取异步操作的返回值
12 
13 2、
14 回调函数可以获取异步操作的返回值的原理是什么
15 回调函数作为实参传递给了异步函数的形参，所以回调函数是在异步函数之内执行，
16 那么回调函数自然可以获取异步操作的返回值
17 
18 3、
19 什么是回调地狱
20 当用回调函数来做异步操作的时候，
21 如果需要实现一个异步操作之后再执行另外的异步操作，
22 那么后一个异步操作需要嵌套在前一个异步操作的回调函数里面里面，
23 当这样嵌套的层数多了，就变成回调地狱了
24 
25 
26 -->
27 <script>
28     //异步函数
29     // function async_fun(param){
30     //     setTimeout(function(){
31     //         console.log(222222);
32     //         return '异步操作：'+param;
33     //     },1000);
34     //     console.log(11111);
35     // }
36     // console.log(async_fun(1));
37 
38 
39     //用回调函数来解决这个问题
40     // function async_fun(param,callback){
41     //     //console.log(callback);
42     //     setTimeout(function(){
43     //         console.log(callback);
44     //         callback('异步操作：'+param);
45     //
46     //         // let callback2=function (a) {
47     //         //     console.log(a);
48     //         // };
49     //         // callback2('异步操作222222：'+param);
50     //         //return '异步操作：'+param;
51     //     },1000);
52     // }
53     // async_fun(1,function (a) {
54     //     console.log(a);
55     // });
56 
57 
58 
59     //需求：
60     //异步操作1做完了再做异步操作2
61     //异步操作2做完了再做异步操作3
62     //异步操作3做完了再做异步操作4
63     function async_fun(param,callback){
64         setTimeout(function(){
65             callback('异步操作：'+param);
66         },1000);
67     }
68     async_fun(1,function (a) {
69         console.log(a);
70         async_fun(2,function (a) {
71             console.log(a);
72             async_fun(3,function (a) {
73                 console.log(a);
74                 async_fun(4,function (a) {
75                     console.log(a);
76                 });
77             });
78         });
79     });
80 
81 </script>
82 </body>
83 </html>