关于js的异步回调原理及应用

[待解决问题]

最近用apicloud完成app，apicloud的很多方法都是异步回调。自己查了很多关于js异步的资料。大概明白了异步的原因，本质就是因为js本身是单线程的执行环境，一个一个方法必须按照顺序执行，如果有10个方法，其中第二个方法就执行了半个小时，那么剩下的都得等待排序，这样的话，后导致页面半天不能刷新过来数据，造成页面‘假死’。于是需要使用异步，异步可以改变程序的执行顺序。

然后我就不知道后边的啦！

希望博友能够解答，新人报道，多多关照。谢谢

风轻云淡2016717 | 菜鸟二级 | 园豆：202
提问于：2016-07-25 16:38

< >

所有回答(2)

JavaScript 拥有一个异步队列，当出现一个回调，就会加到异步队列中，这个队列会交给浏览器执行，浏览器内部还是通过c++ 执行的，不知道这样理解对不对。

小精灵儿Pawn | 园豆：470 (菜鸟二级) | 2016-07-25 18:05

首先谢谢您的回答。

我想可以帮我分析一段代码的执行顺序吗？

  1 function uploadImg() {
  2             api.actionSheet({
  3                 cancelTitle: '取消',
  4                 buttons: ['拍照', '打开相册']
  5             }, function(ret, err) {
  6                 if(ret.buttonIndex == 3) {
  7                     return;
  8                 }
  9                 var sourceType = (ret.buttonIndex == 1) ? 'camera' : 'album';
 10                 if(sourceType == 'camera') {
 11                     api.getPicture({
 12                         sourceType: sourceType,
 13                             allowEdit: true,
 14                             quality: 50,
 15                             encodingType: 'jpg',
 16                             mediaValue: 'pic',
 17                             targetWidth: 100,
 18                             targetHeight: 100,
 19                             saveToPhotoAlbum: true
 20                     }, function(ret, err) {
 21                         alert('拍照成功！'); //成功拍照并且将照片保存到手机相册
 22                         alert(JSON.stringify(ret));
 23                     });
 24                 } else if(sourceType == 'album') {
 25                     var UIMediaScanner = api.require('UIMediaScanner');
 26                     UIMediaScanner.open({
 27                         type: 'picture',
 28                                 column: 4,
 29                                 classify: true,
 30                                 max: 3,
 31                                 sort: {
 32                                     key: 'time',
 33                                     order: 'desc'
 34                                 },
 35                                 texts: {
 36                                     stateText: '已选择*项',
 37                                     cancelText: '取消',
 38                                     finishText: '完成'
 39                                 },
 40                                 styles: {
 41                                     bg: '#fff',
 42                                     mark: {
 43                                         icon: '',
 44                                         position: 'bottom_left',
 45                                         size: 20
 46                                     },
 47                                     nav: {
 48                                         bg: '#eee',
 49                                         stateColor: '#000',
 50                                         stateSize: 18,
 51                                         cancelBg: 'rgba(0,0,0,0)',
 52                                         cancelColor: '#000',
 53                                         cancelSize: 18,
 54                                         finishBg: 'rgba(0,0,0,0)',
 55                                         finishColor: '#000',
 56                                         finishSize: 18
 57                                     }
 58                                 },
 59                                 scrollToBottom: {
 60                                     intervalTime: 3,
 61                                     anim: true
 62                                 },
 63                                 exchange: true,
 64                                 rotation: true
 65                     }, function(rootRet) {
 66                         if(rootRet) 
 67                         {
 68                              //打印出来了选择的所有图片信息，从此处开始ajax上传？
 69                             var length = rootRet.list.length;
 70                             function uploadMoreImg(arg1){
 71                                 if(arg1<0){
 72                                     return;
 73                                     }else{
 74                                         var model = api.require('model');
 75                                         alert(arg1);
 76                                         model.uploadFile({
 77                                             report: false,
 78                                             data: {
 79                                                 file: {
 80                                                     name:arg1+'.jpg',
 81                                                     url: rootRet.list[arg1].path
 82                                                 },
 83                                             }
 84                                         }, function(ret, err) {
 85                                             if(ret) {
 86                                                 alert(JSON.stringify(ret));
 87                                             } else {
 88                                                 alert(JSON.stringify(err));
 89                                             }
 90                                             uploadMoreImg(arg1-1);
 91                                         });
 92                                     }
 93                                 }
 94                             uploadMoreImg(length-1);
 95                                 }
 96                             });
 97                         } else {
 98                             //donothing
 99                         }
100                     });
101                 }

支持(0) 反对(0) 风轻云淡2016717 | 园豆：202 (菜鸟二级) | 2016-07-25 18:46

@风轻云淡2016717: 恩不好意思 ,昨天有点不舒服.

恩你最好把代码折叠起来,或者把函数的骨干提取出来.

恩注意不是所有的回调函数都是异步的,只有产生阻塞的才会是异步.

第一个动作

　　动作完成后回调

　　　　如果是照相机

　　　　　　拍照成功回调

　　　　如果是专辑

　　　　　　拍摄完成回调

　　　　　　　　ajax回调

恩大致就是这样的嘛

还有回调函数可能写的有问题,err 应该在前面,这叫做错误有限的回调函数,

可以看看promise 规范,

支持(0) 反对(0) 小精灵儿Pawn | 园豆：470 (菜鸟二级) | 2016-07-26 21:03

异步，也就是并流，如果你的代码不是依赖关系，不是下一个逻辑依赖上一个逻辑，就可以用异步，不然就只有同步了。异步的方法，你只需要加载的时候同时向后端接口发送请求即可，然后在实现你的业务需求

全力以赴001 | 园豆：629 (小虾三级) | 2016-07-26 17:17

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

关于js的异步回调原理及应用

欢迎，请先登录或者注册。